VerticalLayout with half fixed size

Hello I’m Tiago,
I’m trying to design a page like this:

VerticalLayout: Height:100% and Width:100%

  • Header: Height:200px and Width:100%
  • Content: Height:X and Width:100%
  • Footer: Height:50px and Width:100%
    X = reaming of Height of the page

Is this possible?
I’ve tried with ratios, and it works on a fixed resolution. But if I open in a different resolution the Header and Footer will be in different heights.

Best Regards,
Tiago Freitas

This should be fairly straightforward:

[code]
verticalLayout.setSizeFull();

header.setWidth(“100%”);
header.setHeight(“200px”);
verticalLayout.addComponent(header);

content.setSizeFull();
verticalLayout.addComponent(content);

footer.setWidth(“100%”);
footer.setHeight(“50px”);
verticalLayout.addComponent(footer);

verticalLayout.setExpandRatio(content, 1f);
[/code](If not obvious: I removed everything unnecessary for the explanation like the instantiation of the layouts)
Haven’t tested it and i wrote it without an IDE but i don’t see why it shouldn’t work.

Thank you a lot!
It works!
So the ExpandRatio is saying that all the free space (1f) is taken by ‘content’ right?
Once again thanks a lot.
Tiago

Expand Ratio tells the Client side layouter how to distribute the child components in a layout.
The default expand ratio is 0 so if not set, all components will be distributed equally in the layout. When you set one component to something bigger than 0 like 1f (f just to clearify that it’s a float value. might not be needed. I just got used to writing it like this) it will get all space that is left. All others will take 0 of it and will only take what they need. If a 100% height component has a zero Ratio while another doesn’t it will shrink down to 0px as it “needs” no height.
If you have multiple full-height components you can use relative Expand ratio so something like:

setExpandRatio(biggerComp, 3); setExpandRatio(smallerComp, 1); so the biggerComp will be 3 times as big as the smallerComp

Thank you Marius, i understand now :slight_smile: