custom field renderer text color

  • 1
  • Question
  • Updated 4 years ago
  • Answered
I have a custom field renderer highlighting the background of a field when its value is < 0....



This works great, except that when there are still unsaved changes on the page the text is still in edit mode, (gold-ish colour) and pretty hard to read. I've tried to set the .nx-fieldtext property in the renderer but can't seem to get it working.

Any ideas on how I can set the .nx-fieldtext property?

var field = arguments[0],     value = arguments[1]; 
    skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value);
    if (value < 0) { 
        field.element.css({
            'background-color': 'rgb(253,127,127)',
        //this is where I would like to set the .nx-fieldtext property
            'color':'black'
        }); 
    } else if (value > 0) { 
        field.element.css({
            'background-color': 'rgb(144,228,239)'
    });
}
Photo of Greg Jarrett

Greg Jarrett

  • 3,496 Points 3k badge 2x thumb

Posted 4 years ago

  • 1
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
var field = arguments[0],     value = arguments[1];     skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value);
    if (value < 0) { 
        field.element.css({
            'background-color': 'rgb(253,127,127)',
        });
// I think you can do something like this with jQuery
$('.nx-fieldtext').css('color','black');
    } else if (value > 0) { 
        field.element.css({
            'background-color': 'rgb(144,228,239)'
    });
}
Photo of Greg Jarrett

Greg Jarrett

  • 3,496 Points 3k badge 2x thumb
Thanks Moshe but I can't seem to get that working. I've tried it with the .nx-modified property as well but no good. I might have to use a lighter colour in the background I think.
Photo of Menachem Shanowitz

Menachem Shanowitz

  • 1,074 Points 1k badge 2x thumb
The reason why Moshe's solution didn't work for you, I assume, is because in Skuid you must either use jQuery('.nx-fieldtext') or skuid.$('.nx-fieldtext').

Either way, you may want to use
field.element.children('.nx-fieldtext').css({ 'color':'black'  }); 
This would ensure that only the text of that field is black, while the others will remain gold.
(Edited)
Photo of Greg Jarrett

Greg Jarrett

  • 3,496 Points 3k badge 2x thumb
Thanks Menachem, the field.element.children works perfectly.