JavaFX padding of VBox with TitledPane - css

Question

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):
After adding and adapting a css file, the layout looks like this:
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 :)

Answer 1

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>

Answer 2

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