Highlight selected row in a table CSS issue

Questions
1

Highlight selected row in a table but CSS does not get applied.

In a row action I used the code from Moshe question like this :

var item = params.item;

var list = item.list;

$.each( list.renderedItems,
    function(){
        this.element.removeClass( 'highlighted-row' );
    } );

item.element.addClass('highlighted-row');
console.log(item.element);

---------------------------------------------

I see element has desired class however my in-line CSS :

tr.nx-item.highlighted-row {
    background-color: lightblue;
}


the background-color does not render ??  any suggestions

2

The problem here is that your CSS is not selective enough to “beat” Skuid’s standard CSS rules. You’ll need to make it more selective than the next-most-selective CSS rule. In general, the most selective CSS rule wins out over less selective rules. A rule is made more selective by having more element or class selectors on it. Therefore, changing to the following should work:

table.nx-skootable-data tbody tr.highlighted-row td {   
   background-color: lightblue;
}

3

unfortunately that does not seem to have done the trick… I agree that it should have, and the console agrees with us… yet the row remains unchanged in the ui

4

It looks like your selector is targeting the element and not the elements inside the . Target the element with the background color and you should be fine. tags and backgrounds never seem to work. I’m sure there’s a pretty good explanation. I just don’t have it.

5

Jerry, did you use my CSS instead of yours?

6

yes c&p replaced it


7

Okay I believe you, but the screenshot you posted above makes it look like your previous CSS with tr.nx-item.highlighted-row is still in effect.

8

I guess I did not.. works now

thank you ..

9

A bit more explanation:

Applying a background color to the will work… ish. One problem with this approach, though, is that the background color of the row is completely hidden by the background color of the elements.

If you make sure to explicitly set the background color of the elements to transparent, then you’ll be able to see the background color of the .

There are a few other potential issues with setting the background color of the . In the end, it’s much easier to just set the background color of the elements as demonstrated by Zach.

10

how would this apply for mobile where you change the background of a selected item in a card?