CODEWITHSUNDEEP
vaadinvaadin-gridpolymer-3.xvaadin24
robg
robg

Reputation: 25

Upon hover, how to highlight entire row of vaadin-grid in 24?

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?

Upvotes: 1

Views: 806

Answers (1)

Rolf
Rolf

Reputation: 2418

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);
}

Upvotes: 4

Related Questions