I have the latest version of datagrid running. I am trying to apply a color to all cells in a column:
The result is that the CSS is applied to every odd row and not to all rows on which is should be applied:
I would like all cells to be red when the cell text is "Afgesloten", etc.
Is there anybody who knows how to correct this behaviour?
Hello @Rogier Mullaart
Have you used the dev tools to inspect elements? It's like you don't have a CSS selector strong enough that is being overridden and that's pretty easy to see on the Dev Tools.Are you using the utility classes from OutSystems UI? If you are, that's definitely the problem with your code, as you can see here:
To make it work as you want, you can create a CSS class more specific or simply use an !important (probably the only situation where I would tell you to use this syntax, to be honest) - I would prefer the first option:
.wj-cell.background-red-lighter { background-color: var(--color-red-lighter); } OR .background-red-lighter { background-color: var(--color-red-lighter) !important; }
Best Regards,GM
Hi GM,
Your proposed solution works! Thank you for your help. But I do not understand why the CSS is strong enough in the even cells and not strong enough in the odd cells. Is this something you can explain to me?Regards,
Rogier.
Hi @Rogier Mullaart
If you inspect the DOM elements you'll see a CSS class for alternate rows that comes directly from the Wijmo Flexgrid and for these use cases you need to make it more specific (is actually a pretty common pattern). In this case, you want something custom and more specific so it's just pure CSS rules hierarchy and inspecting the elements with Dev Tools is simple, in the sample available in Forge you can also find some examples.I hope this helps clarify.
Cheers,GM