# Ui-table tickcross colour issue

**URL:** <https://discourse.nodered.org/t/ui-table-tickcross-colour-issue/45255>\
**Category:** Dashboard\
**Created:** [6 May 2021 08:28 UTC](https://discourse.nodered.org/t/ui-table-tickcross-colour-issue/45255 "2021-05-06T08:28:18Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![nrnoob](https://avatars.discourse-cdn.com/v4/letter/n/77aa72/32.png) [@nrnoob](https://discourse.nodered.org/u/nrnoob)\
**Post date:** [6 May 2021 08:28 UTC](https://discourse.nodered.org/t/ui-table-tickcross-colour-issue/45255/1 "2021-05-06T08:28:18Z")

</div>

I am using the ui-table node to manage a table in the dashboard.  
I have added the columns in the node editor, and one of these columns has the "tickcross" format. When I pass msg.payload from another node, the row does show up, but both the tick and cross show up in the site theme colour. I was expecting tick to be in green and cross to be in red, as is shown in the node homepage ([node-red-node-ui-table (node) - Node-RED](https://flows.nodered.org/node/node-red-node-ui-table)) and also in the tabulator's page ([Tabulator](http://tabulator.info/docs/4.4/format)).

In my dashboard -

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/8/08e11b909c75d1d2817b0b53a19c119306fd58e3.png)

In my dashboard, but with Chrome's DarkReader extension turned on, it works fine -

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/4/d41c755e46679b0ef4e48cb99f044ed48af5a123.png)

So I suspected that the extension was messing up my dashboard, but on another machine, which does not have the DarkReader extension, the behaviour is the same as my machine with darkmode turned off i.e. all tickcrosses are in theme colours.

On my machine, on the tabulator's sample page, the tickcrosses look ok, irrespective of the DarkReader mode.

DarkReader off -

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/e/feac699a48eb416d09da452358b1607567188e84.png)

DarkReader on -

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/a/4a0d2f83110a6bf051d55bb8b4ad8f95694f345a.png)

What could be the issue?

Edit:  
More info to help replicate:

- Sample flow

```auto
[{"id":"37bf69c7.e00616","type":"ui_table","z":"b77ebf57.35da3","group":"62e5936d.a8dd6c","name":"","order":1,"width":0,"height":0,"columns":[{"field":"en","title":"Enabled?","width":"","align":"center","formatter":"tickCross","formatterParams":{"target":"_blank"}},{"field":"fc","title":"Function Code","width":"","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"off","title":"Offset","width":"","align":"right","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"len","title":"Quantity","width":"","align":"right","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"32b","title":"32Bit?","width":"","align":"center","formatter":"tickCross","formatterParams":{"target":"_blank"}},{"field":"flt","title":"Floating-point?","width":"","align":"center","formatter":"tickCross","formatterParams":{"target":"_blank"}},{"field":"decs","title":"Decimals","width":"","align":"right","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"csv","title":"Variables","width":"","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}}],"outputs":1,"cts":true,"x":810,"y":2880,"wires":[[]]},{"id":"aa99a4f4.b647c8","type":"ui_button","z":"b77ebf57.35da3","name":"","group":"995f73e2.448bb","order":12,"width":5,"height":1,"passthru":false,"label":"Add","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":330,"y":2880,"wires":[["e14e43ab.cbe47"]]},{"id":"e14e43ab.cbe47","type":"function","z":"b77ebf57.35da3","name":"","func":"var params = {\n \"en\":flow.get(\"qen\")||false,\n \"fc\":flow.get(\"qfc\")||1,\n \"off\":flow.get(\"qoff\")||0,\n \"len\":flow.get(\"qlen\")||1,\n \"32b\":flow.get(\"q32b\")||false,\n \"flt\":flow.get(\"qflt\")||false,\n \"decs\":flow.get(\"qdecs\")||0,\n \"csv\":flow.get(\"qcsv\")||\"\",\n };\nmsg.payload={\n command:\"addRow\",\n arguments: [\n [\n params\n],\n false\n ],\n returnPromise: true\n}\n//var qConfigs = flow.get(\"qConfigs\", \"file\")||[];\n//qConfigs.push(params);\n//flow.set(\"qConfigs\", qConfigs,\"file\");\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":560,"y":2880,"wires":[["37bf69c7.e00616"]]},{"id":"62e5936d.a8dd6c","type":"ui_group","name":"Query configuration","tab":"7b3d0e0f.7efa9","order":2,"disp":true,"width":"20","collapse":false},{"id":"995f73e2.448bb","type":"ui_group","name":"Query Configuration Entry","tab":"7b3d0e0f.7efa9","order":1,"disp":true,"width":10,"collapse":false},{"id":"7b3d0e0f.7efa9","type":"ui_tab","name":"Settings","icon":"settings","disabled":false,"hidden":false}]

```

- Server Version info  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/4/746e37264d0f0cfbe2d44012b784b4ebd6d27695.png)

- Client machine  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/b/9b246024cfd5f6f8dc8ef2acf42821b58c020450.png)

- Using Chrome v90.0 on the NR machine and the client machine

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [6 May 2021 09:36 UTC](https://discourse.nodered.org/t/ui-table-tickcross-colour-issue/45255/2 "2021-05-06T09:36:44Z")

</div>

with out some more information it would be hard to guess what is happening.

1. what version of Node-RED and the dashboard are you running (you can get this from the startup log)
2. what os is the machine running NR using?
3. what os is the machine viewing the dashboard running?
4. have you tried it on other browsers?
5. can you create a small test flow showing the issue? if so please export it and attach it to a reply.

In order to make code more readable and importable it is important to surround your code with three backticks  
`````  
`like this`  
`````

You can edit and correct your post by clicking the pencil icon.

See this post for more details - [How to share code or flow json](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506)

---

<div class="post-metadata">

**Author:** ![nrnoob](https://avatars.discourse-cdn.com/v4/letter/n/77aa72/32.png) [@nrnoob](https://discourse.nodered.org/u/nrnoob)\
**Post date:** [6 May 2021 09:58 UTC](https://discourse.nodered.org/t/ui-table-tickcross-colour-issue/45255/3 "2021-05-06T09:58:32Z")

</div>

I edited the post, I hope it's sufficient to get some ideas where to look.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [6 May 2021 10:56 UTC](https://discourse.nodered.org/t/ui-table-tickcross-colour-issue/45255/4 "2021-05-06T10:56:06Z")

</div>

and what about items 4?

As I do not have a Windows machine I'll have to bow out. Hopefully someone else will take a look at this.

---

<div class="post-metadata">

**Author:** ![nrnoob](https://avatars.discourse-cdn.com/v4/letter/n/77aa72/32.png) [@nrnoob](https://discourse.nodered.org/u/nrnoob)\
**Post date:** [6 May 2021 11:17 UTC](https://discourse.nodered.org/t/ui-table-tickcross-colour-issue/45255/5 "2021-05-06T11:17:39Z")

</div>

I just have 2 machines with me - both Windows with Chrome v90 as I mentioned in my post.  
I also have an iPhone with iOS 14.4.2 and Safari on it also has the same behaviour.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [6 May 2021 11:29 UTC](https://discourse.nodered.org/t/ui-table-tickcross-colour-issue/45255/6 "2021-05-06T11:29:51Z")

</div>

On my iPad, with the ipad's dark mode turned on this is what I see:

 ![Screen Shot 2021-05-06 at 7.26.36 AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/a/7a1b17ae935f9547aacf93a4d7d5b95dfef0f4ac.png)

Note: I added a second button and function to add a row with `true` to see the check marks. Notice there is no coloring. Do you have a tempelate node adding any CSS?

---

<div class="post-metadata">

**Author:** ![nrnoob](https://avatars.discourse-cdn.com/v4/letter/n/77aa72/32.png) [@nrnoob](https://discourse.nodered.org/u/nrnoob)\
**Post date:** [6 May 2021 11:50 UTC](https://discourse.nodered.org/t/ui-table-tickcross-colour-issue/45255/7 "2021-05-06T11:50:55Z")

</div>

Woah, great catch!  
Yes, there is a template node which adds to the site section.  
I disabled it and reloaded Node-Red, but it did not have any effect on the tickcross colours.

```auto
<script id="clockScript1" type="text/javascript">
    var clockInterval;
    $(function () {
        if (clockInterval) return;

        //add logo
        var div1 = $('<div/>');
        var logo = new Image();

        logo.src = '\\White\\schneider_LIO_White_RGB.png'
        logo.height = 65;
        div1[0].style.margin = '1px auto';

        div1.append(logo);

        //add clock
        var div2 = $('<div/>');
        var p = $('<p/>');

        div2.append(p);
        div2[0].style.margin = '5px';

        function displayTime() {
            p.text(new Date().toLocaleString());
        }
        
        clockInterval = setInterval(displayTime, 1000);

        //add to toolbar when it's available
        var addToToolbarTimer;
        
        function addToToolbar() {
            var toolbar = $('.md-toolbar-tools');
            
            if(!toolbar.length) return;
            
            toolbar.append(div1);
            toolbar.append(div2);
            clearInterval(addToToolbarTimer);
        }
        addToToolbarTimer = setInterval(addToToolbar, 1000);
    });
</script>

```

Edit: If you meant colouring as in 'its blue instead of the green in my image', then its because my site theme colour is set to green. I mentioned this in my first post.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [6 May 2021 15:11 UTC](https://discourse.nodered.org/t/ui-table-tickcross-colour-issue/45255/8 "2021-05-06T15:11:47Z")

</div>

In the dashboard sidebar - Site tab - set  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/2/1278c18f27630dbf3a4161c1ce77863bd868d951.jpeg)  
This turns off Node-RED trying to theme everything in the template so should let the original colours through.

---

<div class="post-metadata">

**Author:** ![nrnoob](https://avatars.discourse-cdn.com/v4/letter/n/77aa72/32.png) [@nrnoob](https://discourse.nodered.org/u/nrnoob)\
**Post date:** [6 May 2021 15:21 UTC](https://discourse.nodered.org/t/ui-table-tickcross-colour-issue/45255/9 "2021-05-06T15:21:34Z")

</div>

Yep, that did it!  
With ui-table I am having issues with deleting rows, I am getting "Delete Error - No matching row found" erratically. But I guess that's a topic for another thread!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [20 May 2021 15:22 UTC](https://discourse.nodered.org/t/ui-table-tickcross-colour-issue/45255/10 "2021-05-20T15:22:23Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.