Highlight selected row in a table CSS issue

  • 1
  • Question
  • Updated 1 year ago
  • Answered

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

Photo of Jerry Neppl

Jerry Neppl

  • 130 Points 100 badge 2x thumb

Posted 4 years ago

  • 1
Photo of Zach McElrath

Zach McElrath, Employee

  • 48,984 Points 20k badge 2x thumb
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;
}
Photo of Jerry Neppl

Jerry Neppl

  • 130 Points 100 badge 2x thumb
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
Photo of Zach McElrath

Zach McElrath, Employee

  • 48,984 Points 20k badge 2x thumb
Jerry, did you use my CSS instead of yours?
Photo of Jerry Neppl

Jerry Neppl

  • 130 Points 100 badge 2x thumb

yes c&p replaced it


Photo of Zach McElrath

Zach McElrath, Employee

  • 48,984 Points 20k badge 2x thumb
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.
Photo of Jerry Neppl

Jerry Neppl

  • 130 Points 100 badge 2x thumb

I guess I did not.. works now

thank you ..

Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,470 Points 10k badge 2x thumb
It looks like your selector is targeting the <tr> element and not the <td> elements inside the <tr>.  Target the <td> element with the background color and you should be fine.  <tr> tags and backgrounds never seem to work.  I'm sure there's a pretty good explanation.  I just don't have it.
Photo of JD Bell

JD Bell, Senior Product Engineer

  • 2,996 Points 2k badge 2x thumb
A bit more explanation:

Applying a background color to the <tr> 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 <td> elements.

If you make sure to explicitly set the background color of the <td> elements to transparent, then you'll be able to see the background color of the <tr>.

There are a few other potential issues with setting the background color of the <tr>. In the end, it's much easier to just set the background color of the <td> elements as demonstrated by Zach.
Photo of Jaime

Jaime

  • 1,220 Points 1k badge 2x thumb
how would this apply for mobile where you change the background of a selected item in a card?