Making a Grid responsive in both dimensions

When I put a Grid and other components on a VerticalLayout on a container Panel, all components and the container Panel are horizontally responsive (resizing in width). However, when resizing vertically, the Grid is not responsive and is eventually clipped. Is this a feature or a bug ?
What are the rules for reponsiveness ? Mind that we don’t allow modification of the CSS.

Thank you all.

You can tune the height calculation behaviour of the grid. Check out the method

public void setHeightMode(HeightMode heightMode)

in Grid. I think that can be used to solve your problem.


Hi Pontus, thank you for your assistence.
Unfortunately, even if the HeightMode does what it says it is not responsive to resizing the browser window. The only solution still is to use a scrollbar on the containing panel.


Hi Luc, Now I think I understand what you mean. If the grid is inside the panel, then the panel will provide the scrollbars. The viewport of the panel and the size of the grid is not coupled in any way and the grid will be clipped.

If you do not use a panel and set the HeightMode of the grid to HeightMode.CSS and the height of the grid to 100% it should expand to take all available space. However, if it is placed in .e.g. a vertical layout, the layout must also have height 100% and its parent also and so on. Additionally you will need to set the expand ratio of the grid to 1 (or something else non-zero) to make its slot in the layout expand. See for more details on expand ratios and relative sizes.

The grid will then provide its own scrollbars. Don’t know if this is helpful in your case.