Use % inside setHeight of splitPanel

Vaadin 6 / 7 / 8 Framework UI
1

Hello,

I’m looking to adapt the size of a SplitPanel to the content of my browser window. However if I do this kind of code, the screen is black which is not the case if I use sizes in px units. Do you know how to do what I’m trying to do ?

Not working with % units :


	public void init() {
		Window mainWindow = new Window("Vaadintest Application");
		Label label = new Label("Hello Vaadin user");

		// Have a vertical SplitPanel as the main component.
		SplitPanel vertical = new SplitPanel();

		// Set the size of the SplitPanel rather than the containing Panel,
		// because then we know how much space we have for the panels.
		vertical.setHeight("100%");
		vertical.setWidth("100%");
		// Set the split position to 50 pixels, which is more than
		// enough height for the Label in the upper panel.
		vertical.setSplitPosition(50, SplitPanel.UNITS_PIXELS);
		
		vertical.addComponent(new Label("The contents of the upper area."));
		vertical.addComponent(new Label("The contents of the down area."));
		// Put a horizontal SplitPanel in the lower area.
		mainWindow.addComponent(vertical);
		setMainWindow(mainWindow);
	}

Working with px units :


		Window mainWindow = new Window("Vaadintest Application");
		Label label = new Label("Hello Vaadin user");

		// Have a vertical SplitPanel as the main component.
		SplitPanel vertical = new SplitPanel();

		// Set the size of the SplitPanel rather than the containing Panel,
		// because then we know how much space we have for the panels.
		vertical.setHeight("500px");
		vertical.setWidth("500px");
		// Set the split position to 50 pixels, which is more than
		// enough height for the Label in the upper panel.
		vertical.setSplitPosition(50, SplitPanel.UNITS_PIXELS);
		
		vertical.addComponent(new Label("The contents of the upper area."));
		vertical.addComponent(new Label("The contents of the down area."));
		// Put a horizontal SplitPanel in the lower area.
		mainWindow.addComponent(vertical);
		setMainWindow(mainWindow);

Regards,
Denis.

2

The problem is that the default layout that is inside the main window is an undefined height VerticalLayout. Once you add a percentage sized (height, to be precise) component to that layout, it will render as zero height (undefined * 100% is defined as zero in Vaadin).

You can either fix this by setting the root layout to 100% height, or better, replace the main window layout with the SplitPanel (more efficient in terms if performance):

mainWindow.setContent(vertical);
3

Thanks a lot.