Vaadin 7.1 Layout issue

Vaadin 6 / 7 / 8
1

Hi,

I am very new to Vaadin 7 and facing issues in layout positioning.
I am trying to create a page which has 3 parts.
1.header
2.MainBody
3.footer
The MainBody is contained in a panel and is dynamic and keeps increasing or descreasing in height. This should create a scrollbar on the panel and not have browser level scrollbars. However, I am unable to achieve this.
public class MainComponent extends VerticalLayout {

public class MainComponent extends VerticalLayout {

public MainComponent(UI ui)
{
//Header
VerticalLayout headerLayout = new VerticalLayout();
MenuBar menu = new MenuBar();
menu.setWidth(“100%”);
headerLayout.addComponent(menu);
headerLayout.addComponent(new Button(“Logout”));

//MainContent
bodyContent = new Panel();
ExampleNavigator bodyLayout = new ExampleNavigator(bodyContent); // addds the different view to the navigator.

//Footer
HorizontalLayout footerLayout = new HorizontalLayout();
footerLayout.setSizeFull();
footerLayout.addComponents(new Label("Example"));

// Add all to a layout
mainLayout = new VerticalLayout(headerLayout, bodyLayout, footerLayout);
mainLayout.setSpacing(true);
mainLayout.setMargin(true);
mainLayout.setComponentAlignment(headerLayout, Alignment.TOP_CENTER);
mainLayout.setComponentAlignment(footerLayout, Alignment.BOTTOM_CENTER);
mainLayout.setComponentAlignment(bodyLayout, Alignment.MIDDLE_CENTER);
mainLayout.setExpandRatio(headerLayout, 0.1f);
mainLayout.setExpandRatio(bodyLayout, 0.8f);
mainLayout.setExpandRatio(footerLayout, 0.1f);
mainLayout.setSizeFull();


// The view root layout
root = new VerticalLayout(mainLayout);
root.setSizeFull();
addComponent(root);

}
}

Problem:
The footer is kind of floating with the above code.
If I set the Vlayout height to 100%, the footer overlays the mainbody when the size increases.

Kindly let me know what am I missing here?

2

Hey,

first: Try to use less layouts. If you need just one component, why wrap this component into a VerticalLayout.

second: I think you want a relative fix height for your footer and header and give the rest of the space to the body.
So give no one any sizes but the mainLayout 100% and only and set the expand ratio only your body.

Component header = new VerticalLayout(new MenuBar(), new Button);
Component body = new ExampleNavigator();
Component footer = new Label("Example");
VerticalLayout main = new VerticalLayout(header, body, footer);
main.setExpandRatio(body, 1);
main.setSizeFull();

Something like this :wink:

3

Thanks for the response…:slight_smile:
However with this example as well, the components don’t acquire/use the entire space. I would like the components to spread across the page.
Secondly lets assume that the body is a Panel component where I place my views. So the panel should have scrollbars (not the browser) whenever its contents increase in size.