Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

VerticalLayout with half fixed size

Tiago Freitas
6 years ago Jul 29, 2015 1:34pm
Marius Reinwald
6 years ago Jul 29, 2015 2:02pm

This should be fairly straightforward:

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);

(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.

Tiago Freitas
6 years ago Jul 29, 2015 2:11pm
Marius Reinwald
6 years ago Jul 29, 2015 2:18pm

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
 

maria usman
6 years ago Jul 29, 2015 3:29pm
Tiago Freitas
6 years ago Jul 29, 2015 3:51pm