Vaadin 8 - Layout to arrange a logo and buttons with big space in between

Hi,

Which layout should I choose if I want to arrange a logo on top of the page on the left side and two button on top of the page on the right side. In between the logo and the buttons should be a big space. I prefer doing this without having to use CSS margin, padding around the elements to create the space.

If I take a HorizontalLayout I get the buttons next to the logo.

Now I tried a GridLayout with 3 columns and setColumnExpandRation to create the 2nd column as space. Again there is no space and the buttons are next to the logo.

How do I get the space??

Thanks!

Natalie

Hi, thanks for asking. Layouting can be a challenge to understand in the beginning. Picture of your desired state would help.

However I try to answer. I think HorizontalLayout should be ok for you. You need to study two features of the Layout, the component expand ratio and component alignment.

First you want your HorizontalLayout to have probably width of 100%, i.e. horizontalLayout.setWidth(“100%”)

Secondly each component in the layout takes a slot of equal size by default. You can change this by setting expand ratios to components. E.g. horizontalLayout.setExpandRatio(component,1) You can use integers. You need to know the sum of all ratios you give. So e.g. if you give ratio of 1 to one component and ratio of 2 to other, that totals 3, which means that the slot of the first one will take 1/3 of the space and the second one 2/3. So you probably want to give big ratio for the logo in the middle and something less for the others. It is a bit trial and error to find what looks good.

Thirdly you want to give component alignments to your content. E.g. horizontalLayout.setComponentAlignment(component,Alignment.TOP_RIGHT) says that component should be aligned to the right. So in your case you want to use TOP_LEFT, TOP_MIDDLE (logo in the middle) and TOP_RIGHT (buttons on the right) in order to components to appear where you want them to be.

This way you can have everything in one layout keeping light DOM structure.

Br. Tatu

Hi Tatu,

thanks a lot! Now I understood it. I read the Vaadin documentation many times but it is not clear.
I had to put the 2 buttons in another HorizontalLayout and placed that layout into the other HorizontalLayout.

This is my code (for anyone having the same problem):

		HorizontalLayout logoPlusNaviButtonsLayout = new HorizontalLayout();
		mainLayout.addComponent(logoPlusNaviButtonsLayout);
		logoPlusNaviButtonsLayout.setWidth("100%");
		// layout for the 2 buttons
		HorizontalLayout backButtonLayout = new HorizontalLayout();
		backButtonLayout.addComponent(button1);
		backButtonLayout.addComponent(button2);
		
		logoPlusNaviButtonsLayout.addComponent(logo);
		logoPlusNaviButtonsLayout.addComponent(backButtonLayout);
		logoPlusNaviButtonsLayout.setExpandRatio(logo, 1);
		logoPlusNaviButtonsLayout.setExpandRatio(backButtonLayout, 3);
		logoPlusNaviButtonsLayout.setComponentAlignment(logo, Alignment.TOP_LEFT);
		logoPlusNaviButtonsLayout.setComponentAlignment(backButtonLayout, Alignment.TOP_RIGHT);

Natalie