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);
}

it works, many thanks!