Problem with two VerticalLayouts in HorizontalLayout and setExpandRatio()

Vaadin 6 / 7 / 8
1

Hi, I’m trying to show a HorizontalLayout with two columns: the left column is a VerticalLayout with a TextField to search some text and a Table with the results; the right column is VerticalLayout containing a form.
The left column has height 100% and width 25em, the right column has height 100% and must expand to fill the remaining space so I used setExpandRatio().

As you see in the attached image, the right column hides the left column: is this a bug? I missed something?

I’m using Vaadin 7.0.3 and Chrome.

Here is the simplified test case:


import com.vaadin.server.VaadinRequest;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.TextArea;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

public class StatmanagerUITest extends UI {
	
	private HorizontalLayout mainLayout;
	private VerticalLayout listPanel;
	private VerticalLayout formPanel;

	@Override protected void init(VaadinRequest request) {
		mainLayout = new HorizontalLayout();
		mainLayout.setSizeFull();
		mainLayout.setMargin(true);
		mainLayout.setSpacing(true);
		setContent(mainLayout);
		
		
		mainLayout.addComponent(listPanel = new VerticalLayout());
		listPanel.setWidth("25em");
		listPanel.setHeight("100%");
		
		TextArea text1 = new TextArea();
		text1.setSizeFull();
		listPanel.addComponent(text1);
		
		
		mainLayout.addComponent(formPanel = new VerticalLayout());
		formPanel.setSizeFull();
		mainLayout.setExpandRatio(formPanel, 1f);
		
		TextArea text2 = new TextArea();
		text2.setSizeFull();
		formPanel.addComponent(text2);
	}
}

Thanks

Claudio
12872.jpg

2

Personal experience: use setSizeUndefined() as much as you can, especially when using setExpandRatio() in the same Layout and handle needed widths and heights of Layouts by setting margins, spacing, padding etc. I don’t know whether it is a good practice but it works:)

3

Hi,

The core reason is quite simple: the font-size for the vertical layout is 0, hence 25em counts up 0 pixels.

The reason why the font-size is set to zero on all component container elements in Vaadin 7 is quite more complex, but it relates to HTML5 doctype, inline-block rendering and Internet Explorer (as usual).

The workaround is to set the width to the text field inside the layout, and set the layout with to undefined.

4

It works, thanks Jouni