CODEWITHSUNDEEP
cssjavafxaccordionpanevbox
pixelstuermer
pixelstuermer

Reputation: 339

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 :)

Upvotes: 0

Views: 2438

Answers (2)

pixelstuermer
pixelstuermer

Reputation: 339

Thanks @geh:

Resizing the stage to the scene solved the problem without the need of a css adjustment:

@Override
public void start( Stage stage ) throws Exception {
    Pane root = (Pane) FXMLLoader.load( getClass().getResource( "root.fxml" ) );
    Scene scene = new Scene( root );
    stage.setScene( scene );
    stage.setResizable( false );
    // the following solved it
    stage.sizeToScene();
    stage.setTitle( "JavaFx Test" );
    stage.show();
}

after after

Upvotes: 0

geh
geh

Reputation: 71

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>

Upvotes: 1

Related Questions