Horizontal Layout problem: Extra space

Hi,

I’m new to Vaadin; so I apoligize if the solution to this problem is something obvious.

I’m getting a really annoying layout problem. Hard to explain, but an image can perhaps serve better than a wall of text:

Basically, the HorizontalLayout I’m using is adding extra space below the header (by wrapping it in a

that covers 50% of the height of the page). Not sure why this is happening, it’s not obvious from my source code.

Here is the code:


layout = new VerticalLayout();
header = new Header();
bodyLayout = new GridLayout(3, 1);
		
leftPanel = new Panel();
centerPanel = new Panel();
rightPanel = new Panel();
leftPanelLayout = new VerticalLayout();
centerPanelLayout = new VerticalLayout();
rightPanelLayout = new VerticalLayout();

layout.setSizeFull();
layout.setMargin(false);
		
		
bodyLayout.setSizeFull();
		
leftPanel.addComponent(userServicesTree);
leftPanel.setScrollable(true);
leftPanel.setHeight("100%");

leftPanelLayout.setHeight("100%");
leftPanelLayout.addComponent(leftPanel);
leftPanelLayout.setExpandRatio(leftPanel, 1.0f);
		
	
centerPanel.setWidth("100%");
centerPanel.setHeight("100%");
		
		
centerPanelLayout.setSizeFull();
centerPanelLayout.addComponent(centerPanel);
centerPanelLayout.setExpandRatio(centerPanel, 1.0f);
		
		
	
rightPanel.setWidth("300px");
rightPanel.setHeight("100%");
		
	
rightPanelLayout.setHeight("100%");
rightPanelLayout.setWidth("300px");
		
rightPanelLayout.addComponent(rightPanel);
		
bodyLayout.addComponent(leftPanelLayout);
bodyLayout.setComponentAlignment(leftPanelLayout, Alignment.TOP_LEFT);
bodyLayout.addComponent(centerPanelLayout);
bodyLayout.setComponentAlignment(centerPanelLayout, Alignment.TOP_CENTER);
bodyLayout.addComponent(rightPanelLayout);
bodyLayout.setComponentAlignment(rightPanelLayout, Alignment.TOP_RIGHT);
		
layout.addComponent(header);
		
		
		
layout.addComponent(bodyLayout);
layout.setComponentAlignment(header, Alignment.TOP_CENTER);
layout.setComponentAlignment(bodyLayout, Alignment.TOP_CENTER);
		
		
		
this.setContent(layout);

and the code for the Header:


public class Header extends HorizontalLayout {
	
	/**
	 * 
	 */
	private static final long serialVersionUID = 6031333904141424621L;
	protected static final String COMPANY_LOGO_PATH="images/company_logo.jpg";
	protected static final String COMPANY_LOGO_CAPTION="Thinking Phone Networks";
	protected static final String APP_LOGO_PATH="images/prov_mgr_logo.png";
	protected final Embedded companyLogo;
	protected final Embedded appLogo;
	
	public Header()
	{
		this.setHeight("91px");
		this.setWidth("100%");
		companyLogo = new Embedded();
		companyLogo.setSource(new ThemeResource(COMPANY_LOGO_PATH));
		this.addComponent(companyLogo);
		
		appLogo = new Embedded();
		appLogo.setSource(new ThemeResource(APP_LOGO_PATH));
		this.addComponent(appLogo);
		
		this.addStyleName("header");
	}

Nothing too crazy as you can see, which is why this has me so stumped…

layout.setExpandRatio(bodyLayout, 1f) should do the trick.

That was totally it, thanks so much John. I now actually understand how expandRatio works; I wasn’t really getting it before.