Hover effect in grid

General
1

I’m trying to add some hover effects on to a grid. Here is the CSS which I got from chatgpt

vaadin-grid::part(cell) {
    transition: background-color 0.3s;
}

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

The problem with this is, it is not hovering the entire row as you see below
image

I want the entire row to be colored when hovering. From the doc I see there is a style selector
vaadin-grid::part(row):hover which is not having any effect when I replace the above with row.

The objective is to have something like here Liukuri - sähkön hinta laskuri / lista / kuvaaja

2

It’s slightly more involved. The background color needs to be changed on the cells, like in your solution, but the hover state needs to be observed on the row, where we set the custom property that controls the cell background.

And to cover the case if you have frozen/fixed columns, and other columns can be scrolled underneath them, we need to set both a background image (the linear-gradient with the semi-transparent 10% contrast color) and a background color (the opaque/solid base color).

The transition isn’t going to work with the background image directly. I didn’t have time to think about how to make that work.

vaadin-grid::part(row):hover {
  --vaadin-grid-cell-background: linear-gradient(var(--lumo-primary-color-10pct), var(--lumo-primary-color-10pct)) var(--lumo-base-color);
}
2 Likes
3

In Vaadin 24 we have --vaadin-grid-cell-background CSS property and solution by @Jouni1 is preferable, this was not present in Vaadin 23 or 14, so for sake of completeness I leave here alternative solution for those who are still using older version.

vaadin-grid::part(row):hover {
  background: var(--lumo-contrast-10pct);
}

vaadin-grid::part(body-cell) {
  background-color: unset !important;
}
4

I don’t know why this is not working for me. I copied this

vaadin-grid::part(row):hover {
  --vaadin-grid-cell-background: linear-gradient(var(--lumo-primary-color-10pct), var(--lumo-primary-color-10pct)) var(--lumo-base-color);
}

as is in my styles.css but do not any effect. I’m using V24.5.3

5

This one worked as expected

6

The problem with setting the row background is, that when scrolling to the right, the row cuts off at some point and the hovering effect is lost.

I had a similar issue some time ago, where the only solution with pure css was to use shadow dom styling with adding the following snippet to themes/your-theme/components/vaadin-grid.css

table tr:hover td {
    background: some-background-color;
}
7

which one is the correct way to implement this ? This one or @Tatu2’s one ?

8

The usage of light dom styling / ::parts is the recommended way. But as I said, it will lead to displayment issues, when you have a grid with scrollable content, so the alternative way of shadow dom styling (which is also a Vaadin styling method, even if it is discouraged as the first choice) is more likely the way for you to go.

But in the end, you have all the variants presented, try it out and see which way works the best for you :slight_smile:

9

The cell background is set using background-color:

[part~='cell'] {
    background-color: var(--vaadin-grid-cell-background, var(--lumo-base-color));
}

Gotta change that to:

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

Right, thanks. We might want to change that at some point, to set the background shorthand property instead.

1 Like
11

Just realized, that in Jounis sample it sets the cell background custom variable, not the row background. My fault :(