How to set/remove insets in JavaFX TitledPane

StackOverflow https://stackoverflow.com//questions/23065096

  •  26-12-2019
  •  | 
  •  

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

Was it helpful?

Solution

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

OTHER TIPS

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top