TabPane shrink to biggest child - javafx

Question

I am breaking my head to make this work. Basically I have 2 Tabs. Initially one of them has content which let's suppose is 100px big (I don't know the sizes in advance. This is just an example) and the other has no content.
After some event, I add to the previously empty tab something with, let's say,a 200px height.
Up to hear all good. The TabPane resizes (after me calling requestLayout() ) correctly and fits the new content.
Now if I remove the 200px content, I would like the tab pane to go back to being 100px high, i.e. the biggest item still left on the tabs, however it remains at 200px leaving me with a lot of empty space. Could someone provide me a clue of how to solve this?
Here is my Demo code:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class TabPaneTest extends Application {
#Override
public void start(Stage primaryStage) throws Exception {
TabPane tabPane = new TabPane();
Tab tab1 = new Tab("Test 1");
Tab tab2 = new Tab("Test 2");
final Pane tab2Content = new Pane();
tab2Content.getStyleClass().add("tab2Content");
tab2.setContent(tab2Content);
tabPane.getTabs().addAll(tab1, tab2);
Button addSquare = new Button("Add");
addSquare.setOnAction(event -> {
final Pane tab1Content = new Pane();
tab1Content.getStyleClass().add("tab1Content");
tab1.setContent(tab1Content);
tabPane.requestLayout();
});
Button removeSquare = new Button("Remove");
removeSquare.setOnAction(event -> {
tab1.setContent(null);
tabPane.requestLayout();
});
HBox buttons = new HBox(addSquare, removeSquare);
VBox vBox = new VBox(tabPane, buttons);
Scene scene = new Scene(vBox, 500, 400);
scene.getStylesheets().add(LargeTooltipSample.class.getResource("tabPaneTest.css").toExternalForm());
primaryStage.setScene(scene);
primaryStage.show();
}
}
and here is my CSS (just to better visualize the content):
.tab2Content{
-fx-background-color: red;
-fx-max-height: 100;
-fx-pref-height: 100;
-fx-max-width: 100;
-fx-pref-width: 100;
}
.tab1Content{
-fx-background-color: green;
-fx-max-height: 200;
-fx-pref-height: 200;
-fx-max-width: 200;
-fx-pref-width: 200;
}
Thanks in advance

Answer 1

Try this:
#Override
public void start(Stage primaryStage) throws Exception {
TabPane tabPane = new TabPane();
Tab tab1 = new Tab("Test 1");
Tab tab2 = new Tab("Test 2");
final Pane tab2Content = new Pane();
final Pane tab1Content = new Pane();
tab2Content.getStyleClass().add("tab2Content");
tab2.setContent(tab2Content);
tabPane.getTabs().addAll(tab1, tab2);
Button addSquare = new Button("Add");
Button removeSquare = new Button("Remove");
HBox buttons = new HBox(addSquare, removeSquare);
VBox vBox = new VBox(tabPane, buttons);
double[] tabPaneOriginalHeight = new double[1];//Used to hold tabPane's original height.
addSquare.setOnAction(event -> {
System.out.println(tabPane.getHeight());
tab1Content.getStyleClass().add("tab1Content");
tab1.setContent(tab1Content);
System.out.println(tabPane.getHeight());
tabPane.setPrefHeight(200);//sets the height to 200 after adding tabl1 content
tabPane.requestLayout();
});
removeSquare.setOnAction(event -> {
System.out.println(tabPane.getHeight());
tab1Content.getStyleClass().remove("tab1Content");
tab1.setContent(tab1Content);
System.out.println(tabPane.getHeight());
tabPane.setPrefHeight(100);//sets the height to 100 after removing tab1 content
tabPane.requestLayout();
});
Scene scene = new Scene(vBox, 500, 400);
scene.getStylesheets().add(JavaFXApplication16.class.getResource("tabPaneTest.css").toExternalForm());
primaryStage.setScene(scene);
primaryStage.show();
}