Removing attachments in JavaFX TitledPane with broken CSS

Question

Based on the James_D solution ( How to install / remove inserts in JavaFX TitledPane ) I tried, it seems that removing attachments from JavaFX TitledPane via CSS does not work? It is updated correctly in Scene Builder, but during insertion the insertions remain unchanged. Even Scenic View 8.0 reports the addition of 9.6.

FXML example:

<?xml version="1.0" encoding="UTF-8"?> <?import java.lang.*?> <?import java.util.*?> <?import javafx.scene.*?> <?import javafx.scene.control.*?> <?import javafx.scene.layout.*?> <AnchorPane id="AnchorPane" prefHeight="200" prefWidth="320" stylesheets="@newCascadeStyleSheet.css" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8" fx:controller="test3.FXMLDocumentController"> <children> <Accordion layoutX="14.0" layoutY="14.0" prefHeight="270.0" prefWidth="320.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"> <panes> <TitledPane animated="false" text="untitled 1"> <content> <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0"> <children> <Button fx:id="button" layoutX="9.600000381469727" layoutY="9.600000381469727" prefHeight="124.0" prefWidth="318.0" text="Click Me!" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" /> </children> </AnchorPane> </content> </TitledPane> <TitledPane animated="false" text="untitled 2"> <content> <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" /> </content> </TitledPane> <TitledPane animated="false" text="untitled 3"> <content> <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" /> </content> </TitledPane> </panes> </Accordion> </children> </AnchorPane> 

CSS

 .titled-pane { -fx-text-fill: rgb(0,100,157); } .titled-pane:focused { -fx-color: -fx-base; -fx-text-fill: white; } .titled-pane > .title { -fx-text-fill: rgb(0,100,157); -fx-font-weight: bold; } titled-pane > .title > .label{ -fx-text-fill: rgb(0,100,157); -fx-font-weight: bold; } .titled-pane:focused > .title { -fx-color: rgb(0,100,157); -fx-text-fill: white; } .titled-pane > .title:hover { -fx-color: lightgrey; } .titled-pane > * > * > AnchorPane { -fx-padding: 0px ; } 

View in scene builder: (Preview)

View at runtime:

The amendment does not seem to apply for some reason. In my main application, I use many Accordion containers. Another option is to add an addition to the FXML code to AnchorPane TitledPane , it works, but it is laborious. Am I missing something in CSS?

Answer 1

Set -fx-padding to 0 in the following style classes.

 .titled-pane .content AnchorPane { -fx-padding: 0px; } 

Answer 2

To extend @NDY's answer:

If you are not using AnchorPane as the content of the TitledPane , but some other node, you need to adjust the CSS accordingly.

The universal CSS solution for removing padding in the contents of a TitledPane , no matter what type of Node used as the content, is as follows:

 .titled-pane > .content > * { -fx-padding: 0px; } 

This sets the padding for any child of a TitledPane to 0px .