VerticalLayout and v-spot at 50%

Vaadin 6 / 7 / 8
1

Hello,

I have a problem in vaadin 7 using simple VerticalLayouts and HorizontalLayout with fixed size but it generates div with class v-slot and a relative width of 50% :frowning:

I try to do a little poc with Vaadin7 Beta2 with a standard layout wich is composed by :

  • a main view which is a vertical layout that contains one header and one main layout with a fixed layout of 1000px.
  • the main layout is a horizontal layout composed of one left layout with a fixed width of 200px and a content layout with a fixed width of 800px.

Here is the code of the main view :


public class MainView extends VerticalLayout implements View {

	/**
	 * 
	 */
	private static final long	serialVersionUID	= 1L;

	// private VerticalLayout mainLayout;

	private HorizontalLayout	headerLayout;
	private HorizontalLayout	centerLayout;

	public MainView() {
		buildMainLayout();

		setMainContent();
	}

        private void buildMainLayout() {
		// the main layout and components will be created here
		setSizeFull();
		setMargin(false);
		setSpacing(false);

		headerLayout = new HorizontalLayout();
		headerLayout.setHeight("85px");
		headerLayout.setWidth("100%");
		headerLayout.setStyleName("debug-green");
		HeaderView headerView = new HeaderView();
		headerView.setWidth("1000px");
		headerLayout.addComponent(headerView);
		headerLayout.setComponentAlignment(headerView, Alignment.TOP_CENTER);

		centerLayout = new HorizontalLayout();
		centerLayout.setWidth("1000px");
		centerLayout.setHeight("100%");
		centerLayout.setSpacing(false);
		centerLayout.setMargin(false);

		addComponent(headerLayout);
		addComponent(centerLayout);

		setComponentAlignment(centerLayout, Alignment.TOP_CENTER);
	}

	public void setMainContent() {
		// centerLayout.removeAllComponents();
		centerLayout.addComponent(new FiltersView());
		centerLayout.addComponent(new ContentView());
	}

And here is the FiltersView class :

public class FiltersView extends VerticalLayout {

	/**
	 * 
	 */
	private static final long	serialVersionUID	= 1L;

	public FiltersView() {
		setWidth("200px");
		setHeight("600px");
		setStyleName("debug-red");

		buildLayout();
	}

	private void buildLayout() {
		this.addComponent(new Label("Account filters here"));
	}

}

and the content view :

public class ContentView extends VerticalLayout {

	/**
	 * 
	 */
	private static final long	serialVersionUID	= 1L;

	public ContentView() {
		setWidth("800px");
		setHeight("100%");
		setStyleName("debug-blue");

		buildLayout();
	}

	private void buildLayout() {
		this.addComponent(new Label("Main content here"));
	}

}

and it gives me two blocks of 50% each instead of 200px and 800px.

Any suggestion on what I’m doing wrong?

Thanks

2

Hi,

You’re basically not doing anything wrong, you’re just missing one layout concept which is quite specific to Vaadin: expand ratios.

Once a vertical layout has a specified height or a horizontal layout has a specific width (i.e. other than auto/undefined) expand ratios have to be taken into account when laying out components. By default the layouts allocate each slot the same amount of space in the layout, so each component has an expand ratio of ‘1’. That means each slot will be equal in height/width (for vertical/horizontal layout respectively).

To change the default, you can call layout.setExpandRatio(component, ratio)

So in your case, since you wish for the left side to be 200px wide, and the other side 800px, you could do the following:


FiltersView filters = new FiltersView();
ContentView content = new ContentView();

centerLayout.addComponent(filters);
centerLayout.addComponent(content);

centerLayout.setExpandRatio(filters, 2);
centerLayout.setExpandRatio(content, 8);

You can also achieve it with less code: when setting the expand ratio for one component, all other slots with the default ratio will be converted to zero, and only get as much space as the contained component needs. So you could only set the ratio on the content component, and achieve the same result:


FiltersView filters = new FiltersView();
ContentView content = new ContentView();

centerLayout.addComponent(filters);
centerLayout.addComponent(content);

centerLayout.setExpandRatio(content, 1);

As you see, the actual numbers don’t really matter, it’s the ratio between them. You can think of them as percentages almost.

I hope this clears thinks up a bit. You can read more about expand ratios from the
Book of Vaadin
. The handling of expand ratios has slightly changed between version 6 and 7, so not all of the things in the book apply to version 7 (mainly that the slot sizes are now allocated directly using the ratios, the contained components’ size is not taken into account when distributing the remaining space).

3

Nice. Thanks a lot Jouni Koivuviita.