Custom CSS on Detail View

You can use this code to modify CSS attributes based on field values. You can do this natively on table views (change font color, background color) but if you want to make the same type of change on detail views you need javascript/jquery. 

In my example I wanted the background color of the field to display green if the value was lower than 120, otherwise, it displays red. 

$(document).on('knack-view-render.view_15', function(event, view, data) {

$("#view_15 > section > div > div > div > div > div.kn-detail.field_31 > div.kn-detail-body").each(function() {

if (Knack.models.view_15.attributes.field_31_raw < 120) {

$(this).css({"backgroundColor": "#0ccf0c" ,"padding":"5px" , "color": "white" , "font-weight": "700"})} else {$(this).css({"backgroundColor": "red" , "padding":"5px" , "color": "white" , "font-weight": "700"}) };
});

});

Of course ..... thanks Noel

Hi Noel,

You can only do this in a table, not on a regular detail view. The only options under display rules (on a details view) are show, hide and rename label.

 

Hi Henry

Curious .... why would you do this using code when you can do it using display rules in knack ?

Have you a unique use-case ?

 

Noel