REF: Layouts positioning

Flow
1

I am playing around with layouts. But having a challenge in positioning containers within containers.

For instance I have one VerticalLayout spaning whole window. But would like to place inside two HorizontalLayout both with height 35px and width spanning across the window, however, one should be pinned on the top and the other pinned at the bottm of the window, with a content VerticalLayout inbetween…both fixed. I tried this but it failed:

VerticalLayout root = new VerticalLayout();
VerticalLayout content = new VerticalLayout();
HorizontalLayout header = new HorizontalLayout();
HorizontalLayout footer = new HorizontalLayout();

root.setSizeFull();

header.setHeight("35px");
header.setWidth("100%");

footer.setHeight("35px");
footer.setWidth("100%");

header.setAlignSelf(Alignment.START);
footer.setAlignSelf(Alignment.BASELINE);

root.add(header, content, footer);

Any ideas?

Teddy L.

2

Hello Teddy,

You can set a fix height of 35 px to the header and footer and in the case of the content set flex-grow to 1.

This way, the content will occupy all the available space. I attached you an image with the output:

VerticalLayout content = new VerticalLayout();
HorizontalLayout header = new HorizontalLayout();
HorizontalLayout footer = new HorizontalLayout();

setSizeFull();

header.setHeight("35px"); header.getStyle().set("background-color","red");
header.setWidth("100%");

footer.setHeight("35px"); footer.getStyle().set("background-color","blue");
footer.setWidth("100%");

// You can also use: content.setFlexGrow(1);
content.getStyle().set("flex-grow","1");

content.getStyle().set("background-color","yellow");

add(header, content, footer);

17433412.png

3

Excellent!!!

Worked like a charm.

Now could you advise where i can find documentation about styles that defined by Vaadin like this one you used…“flex-grow”,“1”. Is this drawn from the Vaadin themes?

Teddy L.