Search code examples
cssjavafxaccordionpanevbox

JavaFX padding of VBox with TitledPane

Since I need to have multiple collapsible TitledPanes at once (which the default JavaFX Accordion does not support), I added some TitledPanes into a VBox. This works fine so far, but I realized that the width of the TitledPanes is 10px smaller than the width of the actual VBox.

Following FXML code:

<Pane prefHeight="700.0" prefWidth="1000.0" xmlns="http://javafx.com/javafx/8.0.71" xmlns:fx="http://javafx.com/fxml/1">
    <children>
        <VBox prefHeight="700.0" prefWidth="1000.0">
            <children>
                <TitledPane animated="false" text="Pane 1">
                    <content>
                        <AnchorPane prefHeight="300.0" />
                    </content>
                </TitledPane>
                <TitledPane animated="false" text="Pane 2">
                    <content>
                        <AnchorPane prefHeight="300.0" />
                    </content>
                </TitledPane>
            </children>
        </VBox>
    </children>
</Pane>

Which produces this (see the gap on the right): before

After adding and adapting a css file, the layout looks like this: after

The css code:

VBox {
    -fx-padding: 0 -11 0 -1;
}

For me, this solution works fine, however it seems like a poor workaround. I guess there needs to be a smarter solution?!

Thanks a lot in advance :)

Solution

  • The pane is resized with the stage, but the width of the VBox does not exceed 1000px. The width of the stage of your capture is approximately 1010px.

    You should be able to dispense with the Pane:

    <VBox xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1">
  <children>
      <TitledPane animated="false" text="Pane 1">
          <content>
              <AnchorPane prefHeight="300.0" />
          </content>
      </TitledPane>
      <TitledPane animated="false" text="Pane 2">
          <content>
              <AnchorPane prefHeight="300.0" />
          </content>
      </TitledPane>
  </children>
</VBox>

    Or use AnchorPane to adjust the size of the vbox, if for some reason requires a panel above:

    <AnchorPane xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1">
   <children>
        <VBox AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
            <children>
                <TitledPane animated="false" text="Pane 1">
                    <content>
                        <AnchorPane prefHeight="300.0" />
                    </content>
                </TitledPane>
                <TitledPane animated="false" text="Pane 2">
                    <content>
                        <AnchorPane prefHeight="300.0" />
                    </content>
                </TitledPane>
            </children>
        </VBox>
   </children>
</AnchorPane>