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?

enter image description here

score 16 · Accepted Answer · answered Apr 14 '14 at 17:08

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 ;
}

@James_D: I've tried this but for some reason the CSS solution does not work. I've made a new question for this: http://stackoverflow.com/questions/29607725/remove-insets-in-javafx-titledpane-with-css-not-working — Perneel, Apr 13 '15 at 14:23
This behaves so strangely. 0 is already the default padding value, however, you need to explicitly put the 0 padding into the FXML. Specifying 0 padding in SceneBuilder will not put them into the FXML, and then there will be padding. — Marv, Dec 04 '20 at 16:41

score 6 · Answer 2 · answered Jul 18 '17 at 08:31

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.

How to set/remove insets in JavaFX TitledPane

2 Answers2

Linked