0

If there are just 2-3 rows Vaadin Grid displays an empty space below the last one for some reason (I always wondered why it's so). In Vaadin 8 I solved this problem in the following way:

grid.setHeightByRows(size <= 12 ? size : 12);

So, if there are not so many rows grid has a smaller size without unnecessary empty space below, but if the number of rows is more than 12 it limits its height by 12 and displays a vertical scroll bar.

Could you please advise how can I implement it in Vaadin 24? There is a grid.setAllRowsVisible(true) method, but it doesn't act in the same way. First of all, it loads all elements at once which is not necessary, and also it doesn't allow limiting the maximum height in rows (I can set the height in pixels, but the counting of pixels is not fun).

Sogawa-sps
  • 147
  • 10

1 Answers1

3

Because the V10+ Grid does not have a fixed row height like the V8 version had (i.e. each row can be a different height now), there is no way to set the Grid's height to a certain number of rows. In fact, in 24.0 allRowsVisible mode does not work well with a max-height at all, but this will be fixed in 24.1, when this bugfix ships https://github.com/vaadin/web-components/pull/5429.

Once you're on 24.1, you can set a max-height that will limit the Grid to that height (and make it smaller if there are fewer rows). The default min-height of rows is --lumo-size-m, so you might be able to achieve what you want with something like

vaadin-grid {
  max-height: calc(5 * var(--lumo-size-m));
}

where 5 is the number of rows.

cfrick
  • 35,203
  • 6
  • 56
  • 68
Rolf
  • 2,178
  • 4
  • 18
  • 29
  • Thank you for your answer! Could you please advise why the Grid has the minimum height and displays that empty space below (please see https://i.imgur.com/OXMPOb0.png)? Why it doesn't shrink to content size? – Sogawa-sps Mar 10 '23 at 21:45
  • In normal mode, the Grid always has a certain fixed height, and defaults to 400px. In all-rows-visible mode it does not, and instead grows to accommodate its rows (or whatever min/max height you set on it). – Rolf Mar 13 '23 at 07:45