How do you add a css border to a single field on a table

  • 1
  • Question
  • Updated 1 year ago
  • Answered
I would like to show the full border selectively for an individual column/row on my table.

For records that the users need to submit to an approval process I am highlighting the row like so

CSS:
table.nx-skootable-data > tbody > tr.approvalissues-row > td {
    background-color:orange;
}

JS render snippet:
if(row.Needs_Approval__c) {
    field.item.element.addClass("approvalissues-row");
}

My next goal is to highlight the individual field that is causing the record to require approval by putting a border around it.

I've tried doing something similar to above:

using basically the same CSS format
table.nx-skootable-data > tbody > tr > td.approvalNeededBorder {
    border-width: 2px; 
    border-color: Black;
}

but this does not work...
Photo of Jerry

Jerry

  • 1,150 Points 1k badge 2x thumb

Posted 1 year ago

  • 1
Photo of Josef Lagorio

Josef Lagorio

  • 2,874 Points 2k badge 2x thumb
Jerry,

Does the required field change on a case by case basis or is it always the same field? 
Photo of Jerry

Jerry

  • 1,150 Points 1k badge 2x thumb
No change, for each row the need for approval is triggered by one of two fields that are both displayed. I have render snippets for both of them, I just need to get the css worked out
Photo of Jerry

Jerry

  • 1,150 Points 1k badge 2x thumb
Got it figured out

CSS:
.approvalBorder {
    border-color: black;
    border-style: solid;
}

JS render snippet change:
    field.element.addClass("approvalBorder");