CODEWITHSUNDEEP
gridvaadinvaadin-flow
aha
aha

Reputation: 33

Vaadin 14 grid row stripes: How can we reverse the color?

We can add a vaadin 14 grid row stripes with the following code.

grid.addThemeVariants(GridVariant.LUMO_ROW_STRIPES);

But it shows background-image in even row and white in odd row. I can see below css:

:host([theme~="row-stripes"]) [part~="row"]:not([odd]) [part~="body cell"],
:host([theme~="row-stripes"]) [part~="row"]:not([odd]) [part~="details-cell"] {
  background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
  background-repeat: repeat-x;
}

I want to reverse the color, ie. white in even row and background-image in odd row. How can I achieve it? I tried the following css, but it does not work:

:host([theme~="row-stripes"]) [part~="row"]:not([even]) [part~="body-cell"],
:host([theme~="row-stripes"]) [part~="row"]:not([even]) [part~="details-cell"] {
  background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
  background-repeat: repeat-x;
}

Thanks in advance.

Upvotes: 0

Views: 405

Answers (1)

Tarek Oraby
Tarek Oraby

Reputation: 1219

I think you need to override the existing background image on the even rows as well.

So you can do something like this

:host([theme~="row-stripes"]) [part~="row"]:not([odd]) [part~="body-cell"],
:host([theme~="row-stripes"]) [part~="row"]:not([odd]) [part~="details-cell"] {
    background-image: none !important;
    background-repeat: repeat-x;
}

:host([theme~="row-stripes"]) [part~="row"]:not([even]) [part~="body-cell"],
:host([theme~="row-stripes"]) [part~="row"]:not([even]) [part~="details-cell"] {
    background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
    background-repeat: repeat-x;
}

Note that these styles should be placed in a style sheet that targets the shadow dom of the Grid. If you are using the custom-themeing mechanism, then the above styles should be placed under frontend/themes/<custom-theme-name>/components/vaadin-grid.css.

Upvotes: 1

Related Questions