Changing the color for even/odd Grid rows?

Flow
1

No matter what I try, I get the default light grey for my odd grid rows. Here’s some snippets for context:
Style sheet (./styles/styles.css):
…
.my-grid .v-grid-row:nth-child(even) {
background-color: #55f955;
}
…

My View:
@CssImport(“./styles/styles.css”)
public class JobApplicationsView extends VerticalLayout {
…
// Setup grid for striping
grid.addThemeVariants(GridVariant.LUMO_ROW_STRIPES);
grid.addClassName(“my-grid”);

I’ve tried other things, but alas, nothing changes the stripe colors.

Any suggestions? Thanks in advance!

  • Clint
2

Which Vaadin version?

3

Based on the code sample, looks V24-ish, but the CSS looks like it was written for V8, so I’m guessing it’s a V8 application that’s been migrated to V24ish?

That .v-grid-row selector is a V8-era construct. There is a docs page about styling the Grid, which includes a list of css selectors that can be used: https://vaadin.com/docs/latest/components/grid/styling#css-selectors

There you’ll find these two selectors:

Cell in even row
vaadin-grid::part(even-row-cell)

Cell in odd row
vaadin-grid::part(odd-row-cell)

4

Thanks! I’m writing a v24 app. I used the proper selectors as you mentioned and everything works fine! Thanks again.

5

Great!
Just out of curiosity (and to see if we could avoid it in the future), how did you arrive at the .v-grid-row selector?

6

I used IntelliJ’s AI Assistant and came up with that solution. I believe I googled and found a similar solution. I’ve been using IntelliJ’s AI Assistant with great success when it comes to writing a v24 Vaadin app. So much nicer than writing something from scratch.

7

Right, that’s what I expected. The problem is that AI tools often come up with solutions for much older Vaadin versions (because there’s plenty of material about them still online), in this case Vaadin 8 from 2017. And you’ll sometimes encounter the same outdated info when googling. In Vaadin docs there’s a banner at the top notifying you that you’re looking at docs for an older version, but of course there’s always stackoverflow etc where that may not be obvious.

But at least now you know there’s a styling reference for each component :slight_smile:

1 Like