0

I'm in the process of upgrading my Polymer 3.0 Javascript app from v14 Vaadin Components to V24. I've overcome many breaking changes, but I haven't been able to solve this one.

In Vaadin 14, I'm able to highlight a row in a grid upon hover with this placed in a custom theme for vaadin-grid:

[part~="row"]:hover > [part~="body-cell"] {
  background: var(--lumo-primary-color-10pct);
}

In Vaadin 24, styling of a row in vaadin-grid is per the CSS selector:

vaadin-grid::part(row)

Using this selector, I have not been successful at applying a background color to a grid row (with or without the :hover pseudo-class).

For example:

vaadin-grid::part(row):hover {
  color: green;
  background: orange;
}

selects any row hovered over, applying green to the text, but the background is unchanged.

vaadin-grid::part(body-cell):hover {
  color: green;
  background: orange;
}

selects any cell hovered over, applying both green to the text and orange to the background.

How can I apply a hover highlight to an entire row of vaadin-grid in 24?

robg
  • 15
  • 5

1 Answers1

2

first of all, that same CSS you used in V14 should still work in V24.

In the new "native CSS way" of styling in V24, this is indeed a bit tricky, since the hover state is on the row, but the default background is defined on the cell, and you can't chain part selectors like ::part(row):hover::part(cell) or something.

So what you need to do is define a custom property on the row, e.g. --row-bg like so:

vaadin-grid::part(row):hover {
  --row-bg: var(--lumo-primary-color-10pct);
}

And then apply that property as the cell background:

vaadin-grid::part(cell) {
  background: var(--row-bg);
}
Rolf
  • 2,178
  • 4
  • 18
  • 29
  • If you have other grids in the ItemDetailsRenderer, you also need something like ``` vaadin-grid::part(row):not(:hover) { --row-bg: var(--lumo-base-color); } ``` – user1431279 May 02 '23 at 10:52
  • Also if you don't want to change the background of the ItemDetailsRenderer, change `::part(cell)` with `::part(body-cell)` – user1431279 May 02 '23 at 11:00
  • Thanks user1431279. I also found that the solution Rolf offered overrides row striping when using the row-stripes theme on vaadin-grid. I was able affect stripes by adding this additional css: `vaadin-grid::part(even-row) { --row-bg: var(--lumo-contrast-5pct); }` – robg May 09 '23 at 22:12