Remove insets in JavaFX TitledPane with CSS not working

Question

Based on a solution of James_D (How to set/remove insets in JavaFX TitledPane) that I've tried, it seems that removing insets from a JavaFX TitledPane through CSS does not work? It does update correctly in Scene Builder, but at runtime the insets remain unchanged. Even Scenic View 8.0 reports a padding 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)

preview in scene builder

View at runtime:

view at runtime

So it seems that the padding is not applied for some reason. In my main application I use a lot of Accordion containers. The other option was to add the padding in FXML code to the AnchorPane of the TitledPane, this works but is a time consuming job. Am I missing something in the CSS?

You need `.titled-pane > * > * > #AnchorPane` for the selector, I think. Not sure why it is appearing to work in SceneBuilder though. Are you certain the css is being loaded at runtime? — James_D, Apr 13 '15 at 14:27
I've updated the example with some more CSS elements. As you can see the CSS loads fine. — Perneel, Apr 13 '15 at 14:43
Another suggestion: .titled-pane .content AnchorPane and padding to 0. — NDY, Apr 13 '15 at 14:57
Jep that seems to do the trick :) `.titled-pane .content AnchorPane { -fx-padding: 0px; }`. Can you add it as an answer so I can reward you the points? — Perneel, Apr 13 '15 at 14:59
Well, great it helped you, but honestly, for me it doesnt even make that much sense. We are going to set the padding for the AnchorPane to 0, but why isnt .content not enough? I would expect that all children inside the AnchorPane are now with padding 0, not the content of the TitledPane. I only suggested it because I had exactly the same issue in my own project. — NDY, Apr 13 '15 at 15:03
Yea it does seem to behave strange. Setting the padding to 0 on .content did actually set the padding to zero except for the AnchorPane... — Perneel, Apr 13 '15 at 15:16
Possible duplicate of [How to set/remove insets in JavaFX TitledPane](https://stackoverflow.com/questions/23065096/how-to-set-remove-insets-in-javafx-titledpane) — user1803551, Jul 15 '19 at 00:28

score 3 · Accepted Answer · answered Apr 13 '15 at 15:01

3

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

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

answered Apr 13 '15 at 15:01

NDY

3,527
4
48
63

Markus Weninger · Answer 2 · 2017-07-18T11:39:29.483

2

To extend @NDY's answer:

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

An 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.

edited Jul 18 '17 at 11:39

answered Jul 18 '17 at 08:23

Markus Weninger

11,931
7
64
137

Remove insets in JavaFX TitledPane with CSS not working

2 Answers2

Linked