Mixing AbsoluteLayout and VerticalLayout

Hello,

I am using Vaadin 6.8.5 and I’m having problems setting AbsoluteLayout height to 100%

If I use several AbsoluteLayout it works OK and button Hello is shown


	public void init() {
		this.window = new Window("Window");		
		this.setMainWindow(this.window);
		AbsoluteLayout firstLayout = new AbsoluteLayout();
		firstLayout.addComponent(new Button("Button1"));
		AbsoluteLayout absLayout = new AbsoluteLayout();
		absLayout.addComponent(new Button("Hello"), "left: 50px; top: 50px;");
		firstLayout.addComponent(absLayout);
		this.getMainWindow().setContent(firstLayout);
	}

absLayout gets width and height.


<div class="v-absolutelayout" style="height: 439px; width: 1362px;">

But if I change firstLayout to VerticalLayout, then button Hello disappears


	public void init() {
		this.window = new Window("Window");		
		this.setMainWindow(this.window);
		VerticalLayout firstLayout = new VerticalLayout();
		firstLayout.addComponent(new Button("Button1"));
		AbsoluteLayout absLayout = new AbsoluteLayout();
		absLayout.addComponent(new Button("Hello"), "left: 50px; top: 50px;");
		firstLayout.addComponent(absLayout);
		this.getMainWindow().setContent(firstLayout);
	}

And absLayout gets no height.


<div class="v-absolutelayout" style="width: 1362px;">

Isn’t it possible to mix AbsoluteLayout with 100% height and VerticalLayout?

Thank you.

Your problem is that the verticallayout has an undefined height, and absolutelayout has a relative height (100%, by default). This means that the absolute layout will get a calculated size of 0 pixels. If the absolutelayout were any other layout (say, verticallayout) with a height of 100%, you’d get the same issue.

The fix is to give the verticallayout a defined height, either relative (%) or definitive (px). this will give the absolute layout some pixels to calculate its 100% from. Normally you could also set the second layout height to be undefined, but that doesn’t quite work with absolutelayout.

You can debug problems like this by adding ?debug to the end of your URL, and pressing ‘AL’ (analyze layouts). You’ll get a list of things that are wrong, and why.

Thank you for the answer and the debug tip.