How to set/remove insets in JavaFX TitledPane

Question

I've created a TitledPane in JavaFX with a single child component (a button) as follows:

<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<AnchorPane id="AnchorPane" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
    <children>
        <TitledPane animated="false" layoutX="137.0" layoutY="60.0" prefHeight="400.0" prefWidth="600.0" text="untitled" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
            <content>
                <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" >
                    <children >
                        <Button layoutX="193.1875" layoutY="133.5" mnemonicParsing="false" prefHeight="374.0" prefWidth="598.0" text="Button" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
                    </children>
                </AnchorPane>
            </content>
        </TitledPane>
    </children>
</AnchorPane>

This appears as below. There is quite a bit a spacing around the button, I'd like to reduce this to either 0 or maybe, a single pixel. I don't see any property of either the AnchorPane or the TitledPane that will do this. Is there such a property?

Answer 1

Use Scenic View to figure out issues like this.

The AnchorPane inside the TitledPane has padding of 0.8em (10px) on all sides. This is defined in the default stylesheet, modena.css. You can reset it in the FXML:

<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.geometry.Insets?>

<AnchorPane id="AnchorPane" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
    <children>
        <TitledPane animated="false" text="untitled" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
            <content>
                <AnchorPane >
                <padding>
                        <Insets top="0" right="0" left="0" bottom="0"/>                 
                </padding>
                    <children >
                        <Button mnemonicParsing="false" text="Button" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
                    </children>
                </AnchorPane>
            </content>
        </TitledPane>
    </children>
</AnchorPane>

or with an external style sheet with

.titled-pane > * > * > AnchorPane {
    -fx-padding: 0em ;
}

Answer 2

I already answered on a similar question, but I also want to post it here, since it also perfectly matches this question.

To extend @James_D's answer:

If you do not use AnchorPane as the TitledPane's content, but some other node, you have to adjust the CSS accordingly.

A universal CSS solution for removing padding on a TitledPane's content, no matter which type of Node is used as content, is the following:

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

This sets the padding for any child of the TitledPane's content to 0px.