Table and focused row

Vaadin 6 / 7 / 8 Framework UI
1

Hi.

I would like to style table. I wish that when user would move with mouse over some row, it would become highlighted. Now it becomes highlighted when I select row.
I would like “hover” row to be slightly brighter then selected row.

I found solution that hightlights rows.
.v-table-row:hover,
.v-table-row-odd:hover {
background-color:#DDDDFF;
}

but it doesnt work on already selected rows.

thanks,
ivan

2

Hello Ivan,

I haven’t tested this but add .v-selected to your CSS selector and try to make it more specific. Something like this:

.v-table-row:hover,
.v-table-row-odd:hover,
.v-table-row .v-selected:hover,
.v-table-row-odd .v-selected:hover {
   background-color: #DDDDFF;
}

You may need to add .v-table at the beginning of the selector to make it more specific if the above code doesn’t work. See this
article
 for more info on making CSS selectors specific. :slight_smile:

HTH
/Jonatan