I am using vaadin 23 and I would like to add a split layout to my app. The split layout is part of a dialog that is brought up by the user when a button is clicked. this is the code for the dialog:
private void openDialog() {
// Create the dialog
Dialog dialog = new Dialog();
dialog.setWidth("80vw");
dialog.setHeight("80vh");
Div primary=new Div();
primary.add(new H4("Primary"));
Div secondary=new Div();
secondary.add(new H4("Secondary"));
// Create the SplitLayout
SplitLayout splitLayout = new SplitLayout();
splitLayout.setSizeFull();
splitLayout.setSplitterPosition(30); // 30% left, 70% right
splitLayout.addToPrimary(primary);
splitLayout.addToSecondary(secondary);
dialog.add(splitLayout);
dialog.open();
}
In my browser it looks like this:
CSS Info
dialog
So basically they are stacked over each other even so they should be next to each other. Furthermore, there is not splitter visible.
I tried vertical layout, horizontal layout, and many more different once, all with the same result.
It seems that the styling in the browser is totally off. (At least if i set display flex in the browser it is next to each other, yet, still not splitter is visible) Could someone help or give me direction where to investigate further?
Actions taken:
Several different layouts as primary and secondary.
Changed CSS within the browser
different constructors of the splitlayout.
