Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
what's wrong with VerticalSplitPanel?
Hello there,
I am new to vaadin and cannot find an explanation for the following phenomenon. Any help is appreciated.
The idea was to place VerticalSplitPanel between other controls into a form, like this:
TOP
------- split start -----
Label 1
------- separator -----
Label 2
-------- split end ------
BOTTOM
Here comes the code:
public void init() {
VerticalSplitPanel split = new VerticalSplitPanel();
split.setSplitPosition(70);
split.setHeight("100px"); //this one works
//split.setHeight("50%"); //[b]VerticalSplitPanel is not shown at all.[/b]
split.addComponent(new Label("label 1"));
split.addComponent(new Label("label 2"));
Window mainWindow = new Window("MyApplication");
mainWindow.getContent().addComponent(new Label("--- TOP ---"));
mainWindow.getContent().addComponent(split);
mainWindow.getContent().addComponent(new Label("--- BOTTOM ---"));
setMainWindow(mainWindow);
}
Not sure what your TOP and BOTTOM are, try following code to split main window into two parts:
public void init() {
VerticalLayout top = new VerticalLayout();
top.setSizeFull();
top.addComponent(new Label("label 1"));
VerticalLayout bottom = new VerticalLayout();
bottom.setSizeFull();
bottom.addComponent(new Label("label 2"));
VerticalSplitPanel split = new VerticalSplitPanel();
split.setFirstComponent(top);
split.setSecondComponent(bottom);
split.setSizeFull();
Window mainWindow = new Window("MyApplication");
mainWindow.getContent().setSizeFull();
//mainWindow.getContent().addComponent(new Label("--- TOP ---"));
mainWindow.getContent().addComponent(split);
//mainWindow.getContent().addComponent(new Label("--- BOTTOM ---"));
setMainWindow(mainWindow);
}
Thank you for your post, Watt Lee.
This is not what I am trying to do. The only component you add to the content is split - that works. What I am trying to do, is TOP, split and BOTTOM, added directly to the content. Think of TOP as a title, split contains document preview as top component and a result list as bottom component, BOTTOM is a toolbar.
Try
@Override
public void init() {
VerticalSplitPanel split = new VerticalSplitPanel();
split.setSplitPosition(70);
//split.setHeight("100px"); //this one works
split.setHeight("100%"); //VerticalSplitPanel is not shown at all.
split.setFirstComponent(new Label("label 1"));
split.setSecondComponent(new Label("label 2"));
VerticalLayout layout = new VerticalLayout();
layout.setSizeFull();
layout.addComponent(new Label("--- TOP ---"));
layout.addComponent(split);
layout.setExpandRatio(split, 1.0f);
layout.addComponent(new Label("--- BOTTOM ---"));
Window mainWindow = new Window("MyApplication");
mainWindow.setContent(layout);
setMainWindow(mainWindow);
}