Search code examples
javacsssassvaadinvaadin8

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

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:

example with no height

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

example with height

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.

Solution

  • 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 Labelson top, you just need to add a "empty" Labelals last element to the VerticalLayout, and tell the VerticalLayoutto 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.