height 100% and min height


I like to make an component strech ONLY when there is more space than the initial size, but not shrink to 0px. If I am not wrong understand, when I set height to 100% then the component will grow and shring using the % of space until 0px. No scrollbar appears.

There is any way to set both height 100% and a minum height size? The minimun size can be the initial size of the component but is still good to define a minimum size with pixels even with an extra statement.

Thanks in advance for any help!

I think you need to do this in your theme file with css, see https://www.w3schools.com/cssref/pr_dim_min-height.asp


I think that one way to do this is to use a CssLayout to which you would add the components. Then you can easily style those with standart CSS rules, i.e. define the height and max-height properties.

Hope this helps,

sadly min-height css does not work. The html element itself has this min-height. But it’s container will shrink less than the min-width of the child. It’s look like that vaadin for layout calculations uses only server side defined sizes. The worst case is with the grid, because the layout does calculate absolute pixels based on server side sizes of grid and all of the parents. If I try to do somethink with css, the grid does not resize or only a part of it.

Is this true? Is possible to insert a grid into a csslayout which sized are defined with css and not with vaadin?

if I resize the window, the grid within a csslayout is mess. but if I scroll the grid after some time it adjust itself to the right size. Somebody know how is possible to trigger grid “repaint”?

Grid has pretty complex dynamics, like calculating column widths etc. Also it is modifying some styles itself, so it is not easy to style it with css. So it is a bit special case. Thus probably with Grid you need to have a solution like if your container (CSSLayout) is shrink smaller than Grid, there will be scroll bar (like overflow: scroll).

Thanks you. CSSLayout with overflow:scroll will probably work. But if I make grid.setSizeFull(), then when resizing the CSSLayout (with a min-height) the grid is mess. This case does not work. Surprisly scrolling the grid it will adjust. It’s mean that the new client size is used, but repaint is only triggered by a server status change.


You can try to force the layout on the client-side by doing the following JS call: “vaadin.forceLayout()”. It’s not the recommended way, but it might help with your issue.

– Goran