cssextjsextjs-gridextjs7

Bug in ExtJS 7.x Modern Material css ".x-show-selection> .x-listitem.x-selected" in Edge and Chrome browsers


I recently purchased the ExtJS 7.x license and am doing some tests, I ended up finding a flaw (incompatibility) with the Edge and Chrome browsers.

When creating a simple grid type component, selecting the record row does not override the record (row). the record is white and the background is gray. In dark mode, the selected record in black and the background in blue.

How can I solve this problem?

CSS
.x-show-selection > .x-listitem.x-selected {
    background-color: #e0e0e0;
    background-color: var(--selected-background-color);
    color: #111;
    color: var(--color);
}

Edge - BUG on Grid record selection

Edge - BUG on Grid Dark Mode Record selection


Solution

  • In your example you are setting the colors and override your changes in the next line with the original values. That way you are overriding your changes.

    <style>
        .x-show-selection > .x-listitem.x-selected {
            background-color: red;
            color: white;
        }
    </style>
    

    This should do the trick.

    See the index.html in this Fiddle