Header Center Footer concept

Vaadin 6 / 7 / 8 Framework UI
1

Hi,

I am trying to create a page with a header, a centered content part, and a footer.

Header and footer look right. Header is at the top. But footer is not at the bottom of the page and the content part is not stretched to always 100%. I have seen some other topics with the same issue but no answer worked for me.

Here is my window code:

public class ApplicationWindow extends Window {

private static final long serialVersionUID = 1L;

private Label applicationTitleLabel;
private Panel contentLayout;
private VerticalLayout windowLayout;
private MenuBar menuBar;

public ApplicationWindow(String title) {
	windowLayout = new VerticalLayout();
	windowLayout.setStyleName("windowLayout");
	addComponent(windowLayout);
	
	/* Header */
	Panel headerPanel = new Panel();
	headerPanel.setStyleName("header");
	
	Panel headerBackgroundPanel = new Panel();
	headerBackgroundPanel.setStyleName("headerBackground");

	Panel logoPanel = new Panel();
	logoPanel.setStyleName("headerLogo");
	headerBackgroundPanel.addComponent(logoPanel);
	
	headerPanel.addComponent(headerBackgroundPanel);

			
	/* Footer */
	HorizontalLayout footerLayout = new HorizontalLayout();
	footerLayout.setStyleName("footer");
	footerLayout.setSizeFull();
	
	applicationTitleLabel = new Label(title);
	applicationTitleLabel.setStyleName("applicationLabel");
	footerLayout.addComponent(applicationTitleLabel);
	
	Label copyrightLabel = new Label("Gebhart Quality Analysis (QA) 82");
	copyrightLabel.setStyleName("copyrightLabel");
	copyrightLabel.setSizeFull();
	footerLayout.addComponent(copyrightLabel);
	
	/* Menu */
	menuBar = new MenuBar();
	menuBar.setStyleName("menuBar");
	menuBar.setSizeFull();
	
	/* Content */		
	contentLayout = new Panel();

	windowLayout.addComponent(headerPanel);
	windowLayout.addComponent(menuBar);
	windowLayout.addComponent(contentLayout);
	windowLayout.addComponent(footerLayout);
	
	windowLayout.setExpandRatio(contentLayout,  1);
	windowLayout.setComponentAlignment(footerLayout, Alignment.BOTTOM_CENTER);
}

}

Any ideas?

Regards,

Tex

2

You are adding the windowLayout to the Window as a child component of the window layout instead of setting it as the layout of the window by calling setContent. replace addComponent with setContent.