How to set height of Vertial Layout to 100%

Vaadin 6 / 7 / 8
1

The following code does not set the size of Vertical Panel to 100%.
I am setting background color of Vertical Layout to blue to see the size of the panel. I expected the complete browser window to be blue but only three lables appear with blue background.


@Theme("mytheme")
public class TestvaadinRoot extends Root {
	@Override
	public void init(WrappedRequest request) {
		setSizeFull();
		VerticalLayout vp = new VerticalLayout();
		vp.addStyleName("bgcolor");
		vp.setSizeFull();
		
		GridLayout grid = new GridLayout(1,3);
		grid.setSizeFull();
		
		grid.addComponent(new Label("Label1"));
		grid.addComponent(new Label("Label2"));
		grid.addComponent(new Label("Label3"));

		vp.addComponent(grid);
		addComponent(vp);
	}

}
2

Pressing the AL button in Vaadin’s debug console (opened if ?debug is added to the URL) will tell you that there is a layout problem because your 100% high VerticalLayout is inside another VerticalLayout that has undefined height. This is the content layout of the Root.

To fix the problem, you could either add getContent().setSizeFull() to make the content layout have 100% height or then you could use your own VerticalLayout as the content layout using setContent(vp) instead of addComponent(vp).

3

Thank you for your help! It works.

4

Hello.

I’m using Vaadin 7.0.0.beta8 and have a layout problem with VerticalLayout. Following code will not place the Image in the middle of the borwser-window (If i use a fixed height e.g. 900px it works). Any idea?

public class Login extends VerticalLayout implements View
{
	public Login(final Navigator navigator)
	{
		setSizeFull();
		setHeight("100%");
		
		setSpacing(true);

		HorizontalLayout topLayout = new HorizontalLayout();
		topLayout.setWidth("100%");
		topLayout.setSpacing(true);
		addComponent(topLayout);

		Button testB = new Button("TestB");
		addComponent(testB);
		
		ThemeResource uniiqueSplashResource = new ThemeResource("img/notloggedin.jpg");
		Embedded uniiqueSplashImage = new Embedded(null, uniiqueSplashResource);
		addComponent(uniiqueSplashImage);
		setComponentAlignment(uniiqueSplashImage, Alignment.MIDDLE_CENTER);
		
		setExpandRatio(uniiqueSplashImage, 1.0f);
	}
	
...