how to define the length and height when applying a background color in cell

  • 1
  • Question
  • Updated 6 months ago
  • Answered
This is the JavaScript I'm using to apply the background color for the column Direct Competition.  My problem is when the cell is empty the height of background color reduces as seen on the screenshot. Is there a way to define the height and length in the absence of a data in the cell. 

JavaScript:
var $ = skuid.$;
var field = arguments[0];
var value = arguments[1];
var row = field.row;
switch (field.mode) {
case 'edit':
    skuid.ui.fieldRenderers[field.metadata.displaytype].edit(field, value);
    break;
case 'read':
case 'readonly':
    var cellElem = field.element;
    cellElem.css('background-color', function () {
        var bgValue = null;
        if (value) { 
            bgValue = '#FF4500';
            } else {
                bgValue = '#78a22f';
            }
        return bgValue;
    });
    skuid.ui.fieldRenderers[field.metadata.displaytype].read(field, value);

Circled in red where the issue is.

  
Photo of Toms Vineeth John

Toms Vineeth John

  • 428 Points 250 badge 2x thumb

Posted 7 months ago

  • 1
Photo of Mike Dwyer

Mike Dwyer, Champion

  • 3,482 Points 3k badge 2x thumb
Can you change the rendered value of Direct Competition to &npsp;?
From what I can tell, the style/css is applied identically; the only difference is a printable character in the nx-fieldtext div. There may be something in the css for the nx-fieldtext class. I'm pretty ignorant about this, but I've managed to get some cell highlighting to work. 
Photo of Toms Vineeth John

Toms Vineeth John

  • 428 Points 250 badge 2x thumb
Hi Mike, I'm not very familiar with CSS, where do you want me to put &npsp;
Photo of Mike Dwyer

Mike Dwyer, Champion

  • 3,482 Points 3k badge 2x thumb
Not in the css, but in the javascript. The variable "value" that you obtain from arguments[1] and display in the skuid.ui.fieldRenderers, would be changed from null to " "

I think you can add value = ' '; to the "else" clause where you set the color to #78a22f. (This does only change the display value, not the actual data value.)
Photo of Toms Vineeth John

Toms Vineeth John

  • 428 Points 250 badge 2x thumb
Hi Mike, I tired it and it didn't work but I did find another way. I gave the value="-" and font the color the background.