Aligning Components in a grid cell and recalculating the row height

Flow
1

I have a grid with Components of different heights in the cells. By default the components align themselves vertically in the middle of the cell/row. I would like to align them at the top of the cell, but cannot find any setting for this.

Secondly, when a cell component’s height is increased dynamically the row height does not recalculate automatically and the bottom of the component gets cut off. Is there some way to recalculate the grid row height to show the full component content?

Thanks for the help.
18574253.png

2

Hi Franz,

The following CSS should work.

[part~="cell"]
:not([part~="details-cell"]
):not([part~="header-cell"]
) {
  align-items: flex-start;
}

If you’re using V14:

CssImport(value = "./styles/grid.css", themeFor = "vaadin-grid")

Source: https://vaadin.com/docs/v14/flow/styling/importing-style-sheets

If you’re using V19 you can create vaadin-grid.css and place it in frontend/themes/<myapp>/components and it will automatically get picked up.

3

Hi Joacim,

Thanks, this works great but it styles all of the grids in the whole application. Is there some way to apply the style to just one specific grid on a page?

Franz

4

Hi Franz,

You could do it many ways, but I believe this would be the shortest path to it:

Add a class name for the component, from the Java side:
grid.addClassName("my-grid")

Now tweak the css selectors to target only the element you want:

:host(.my-grid) [part~="cell"]
:not([part~="details-cell"]
):not([part~="header-cell"]
) {
  align-items: flex-start;
}
5

Exactly what Oliveira said above. :slight_smile:

6

Perfect. Thanks. Works like a charm!

Franz