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

edited September 2019 in Questions
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.
image
  

Comments

  • edited September 2019
    Can you change the rendered value of Direct Competition to &npsp;?  
    imageFrom 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. 
  • edited May 2018
    Hi Mike, I'm not very familiar with CSS, where do you want me to put &npsp;
  • edited May 2018
    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.)
  • edited June 2018
    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.  
Sign In or Register to comment.