JavaFX VGrow TabPane on content change

Question

In my JavaFX application, I have a TabPane in a TitledPane . Within the TabPane is a VBox which includes a button that increases the number of elements in that VBox (and as such, the height of the VBox ).

However, I seem to be unable to get the Tab / TabPane to resize when the VBox grows. (Removing the TabPane and putting the VBox in the TitledPane directly leads to proper on-the-fly sizing.) However, changing the tab makes the TabPane realize that it is too small and resize.

Below is a small example FXML that can reproduce this. Click the button in the first tab any number of times then switch tabs. the TabPane will then resize to fit the new amount of content.

How can I make the TabPane resize on the button action?

---

fxml:

<AnchorPane xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1" fx:controller="FXMLController" prefHeight="400" prefWidth="700">
    <children>
        <TitledPane>
            <TabPane>
                <tabs>
                    <Tab>
                        <VBox fx:id="vBox">
                            <children>
                                <Button onAction="#addElement" />
                            </children>
                        </VBox>
                    </Tab>
                    <Tab />
                </tabs>
            </TabPane>
        </TitledPane>
    </children>
</AnchorPane>

controller:

@FXML VBox vBox;

@FXML void addElement() {
    vBox.getChildren().add(new Label("Hello World"));
}

(of course with proper imports that I've left out for brevity's sake)

Answer 1

To get the redraw to happen, you need to mark the TabPane as "dirty" -- that it requires recalculation of size in the UI.

This is done via calling the method requestLayout() on the TabPane .

See the docs for TabPane and its superclass Parent

---

To make this example behave, add fx:id="tabPane" to the <TabPane> fxml node, then add the field @FXML TabPane tabPane; to the controller and the line tabPane.requestLayout() to #addElement .