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

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.

Can you change the rendered value of Direct Competition to &npsp;? ![](https://us.v-cdn.net/6032350/uploads/attachments/RackMultipart20180525-11625-15eb7ql-image_inline.png "Image https//d2r1vs3d9006apcloudfrontnet/s3\_images/1731959/RackMultipart20180525-11625-15eb7ql-image\_inlinepng1527211733")

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.

Hi Mike, I’m not very familiar with CSS, where do you want me to put &npsp;

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.)

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.