How can I set width of vaadin layout and still have inner components take as much space as they need?

Question

So I have an object of VerticalLayout . Without height being set - inner components look fine: each label takes as least space as it can and stays on top:

But, if I set height of layout to 400px with filesLayout.setHeight("400px"); - each of my 3 labels starts taking 33% of the space :

I just want my labels to take only required amount of space and my VerticalLayout to be as long as I set it to be. Please, help me.

Answer 1

The VerticalLayout distributes the heights equally between all components. So with 3 components, you get 3 rows, each 33% of the full VerticalLayout height.

You can manipulate the expand ratios with the .setExpandRatio(...)

To have all Labels on top, you just need to add a "empty" Label als last element to the VerticalLayout , and tell the VerticalLayout to use all "overflow" height to this last line.

Label empty= new Label();
vl.addComponent(empty);
vl.setExpandRatio(empty, 1);

Setting it to 1 means that it will take 1 part of the overflow height.

There is also this short cut method to do both in one call:

vl.addComponentsAndExpand(empty);

This is the answer to your question, but probably you will comme up with this issue:

What do we do when the content of the VerticalLayout is higher than the available height? But that's another question, perhaps a Panel would be the better container if you wish to have scroll bars.