Popping TitledPane content out to window - javafx

Question

I'm trying to get a UI behavior of an accordion in which the user can pop out any TitledPane to a window, and pop the window back into a TitledPane inside the accordion.
However, when popping out a collapsed TitledPane the content isn't aligned properly in the Stage, and if the no pane is expanded it won't even show at all.
Attached is a minimal example showing the problem - note that I'm keeping two placeholder panes to avoid having the content node (A VBox in my case) be in the Scene Graph more than once. I have tried setting preferredSize and visible properties on the VBox and also calling layout before and after showing, and even programmatically expanding the titled pane, but nothing seems to work.
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.Pane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class Main extends Application {
#Override
public void start(Stage primaryStage) throws Exception {
TitledPane t1 = new TitledPane();
TitledPane t2 = new TitledPane();
Accordion accordion = new Accordion(t1, t2);
t1.setContent(buildComponent("Pane 1", t1, accordion));
t2.setContent(buildComponent("Pane 2", t2, accordion));
primaryStage.setScene(new Scene(accordion, 300, 300));
primaryStage.show();
}
private VBox buildComponent(String name, TitledPane titledPane, Accordion holder) {
final Button popout = new Button("Pop out");
titledPane.setGraphic(popout);
titledPane.setText(name);
final VBox component = new VBox(new Label(name), new TableView<>());
final Pane placeholder1 = new Pane();
final Pane placeholder2 = new Pane();
Stage st = new Stage();
st.setScene(new Scene(placeholder1, 300, 300));
popout.setOnAction(event -> {
if (!st.equals(component.getScene().getWindow())) {
holder.getPanes().remove(titledPane);
titledPane.setContent(placeholder2);
st.getScene().setRoot(component);
st.show();
}
});
st.setOnHidden(windowEvent -> {
st.getScene().setRoot(placeholder1);
titledPane.setContent(component);
holder.getPanes().add(titledPane);
});
return component;
}
public static void main(String[] args) {
launch(args);
}
}
Illustrations of results:
Result when no pane is expanded:
Result when other pane is expanded. Note how the label is not visible:
Result when pane is expanded - this is the result I want to have in all cases:

Answer 1

After some more playing around I've found a way to circumvent this problem, by using AnchorPanes instead of directly setting the Stage's root and the TitledPane's content:
private VBox buildComponent(String name, TitledPane titledPane, Accordion holder) {
final Button popout = new Button("Pop out");
titledPane.setGraphic(popout);
titledPane.setText(name);
final VBox component = new VBox(new Label(name), new TableView<>());
final AnchorPane placeholder1 = new AnchorPane();
final AnchorPane placeholder2 = new AnchorPane();
AnchorPane.setTopAnchor(component, 0D);
AnchorPane.setBottomAnchor(component, 0D);
AnchorPane.setLeftAnchor(component, 0D);
AnchorPane.setRightAnchor(component, 0D);
Stage st = new Stage();
st.setScene(new Scene(placeholder1, 300, 300));
titledPane.setContent(placeholder2);
placeholder2.getChildren().add(component);
popout.setOnAction(event -> {
if (!st.equals(component.getScene().getWindow())) {
holder.getPanes().remove(titledPane);
placeholder2.getChildren().clear();
placeholder1.getChildren().add(component);
st.show();
}
});
st.setOnHidden(windowEvent -> {
placeholder1.getChildren().clear();
placeholder2.getChildren().add(component);
holder.getPanes().add(titledPane);
});
return component;
}
This new buildComponent also adds the VBox to the TitledPane, so the call to TitledPane#setContent in the question should be removed.
I'm still interested to know why this problem occurs, or if there is a way to solve it without wrapping my pane with another pane (AnchorPane in my case).