Row Hover Color Issue: Not Fully Displaying Color in Wide Table

Support
#1

Jmix Version 2.4.3
When the table is too wide horizontally, hovering does not display color background the entire row.

vaadin-grid::part(body-row):hover {
    background-color: red;
}

image

#2

same problem

1 Like
#3

Hi

It’s not entirely clear what behavior you expected. Could you please provide more context?
Also, a test project would be very helpful in understanding your issue. Thanks.

Dmitriy

1 Like
#4

Hi
Sorry for not clearly expected.

My expectation is that when I hover over a row, the entire row should be highlighted, covering its full width, even when there is a horizontal scrollbar. Currently, when scrolling to the right, the hover effect does not extend to the entire row, leaving part of it unhighlighted.

A (online-video-cutter.com)

#5

As I can see, the Vaadin documentation suggests using the following selector:

vaadin-grid::part(row):hover {
    --vaadin-grid-cell-background: red;
}

See: How to style the Grid component | Vaadin components
Also please pay attention to this note in the Vaadin documentation:

Note: To set background colors based on row selectors, use the --vaadin-grid-cell-background style property.

Have you tried it?

Dmitriy

1 Like
#6

thank you, it’s work