Dashboard-2 dynamically set icon and icon color of ui-switch

Dashboard
1

how can i set icon and icon color of ui-switch with css in dashboard 2?

another question: when i inject the following class with msg.class, it does not change until i refresh the page ?

.my_switch_class .nrdb-switch {
    background-color: black !important;
    color: white !important;
}
2

This shouldn't be the case - do you have a flow you can share please?

3

here is the flow

[
    {
        "id": "981ba4b0ce8bdc17",
        "type": "ui-switch",
        "z": "147a00e24481a9dc",
        "name": "",
        "label": "switch",
        "group": "d6059922833afe8d",
        "order": 0,
        "width": 0,
        "height": 0,
        "passthru": false,
        "topic": "topic",
        "topicType": "msg",
        "style": "",
        "className": "",
        "onvalue": "true",
        "onvalueType": "bool",
        "onicon": "",
        "oncolor": "",
        "offvalue": "false",
        "offvalueType": "bool",
        "officon": "",
        "offcolor": "",
        "x": 710,
        "y": 200,
        "wires": [
            []
        ]
    },
    {
        "id": "ef954a4c4ccecd40",
        "type": "ui-template",
        "z": "147a00e24481a9dc",
        "group": "",
        "page": "",
        "ui": "f807a6e2b6ed1656",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "head": "",
        "format": ".my_switch_class .nrdb-switch {\n    background-color: black !important;\n    color: white !important;\n}\n\n.my_switch_class2 .nrdb-switch {\n    background-color: gray !important;\n    color: white !important;\n}",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "site:style",
        "className": "",
        "x": 880,
        "y": 200,
        "wires": [
            []
        ]
    },
    {
        "id": "d18a02fd5416f3db",
        "type": "function",
        "z": "147a00e24481a9dc",
        "name": "function 2",
        "func": "msg.class =\"my_switch_class\"\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 540,
        "y": 200,
        "wires": [
            [
                "981ba4b0ce8bdc17"
            ]
        ]
    },
    {
        "id": "f0cb787618c828ff",
        "type": "inject",
        "z": "147a00e24481a9dc",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 380,
        "y": 200,
        "wires": [
            [
                "d18a02fd5416f3db"
            ]
        ]
    },
    {
        "id": "8c1bfc507d7fc969",
        "type": "function",
        "z": "147a00e24481a9dc",
        "name": "function 3",
        "func": "msg.class =\"my_switch_class2\"\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 540,
        "y": 280,
        "wires": [
            [
                "981ba4b0ce8bdc17"
            ]
        ]
    },
    {
        "id": "eb96258994e120c7",
        "type": "inject",
        "z": "147a00e24481a9dc",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 380,
        "y": 280,
        "wires": [
            [
                "8c1bfc507d7fc969"
            ]
        ]
    },
    {
        "id": "d6059922833afe8d",
        "type": "ui-group",
        "name": "My Group",
        "page": "adfdb0073bd846f6",
        "width": "6",
        "height": "1",
        "order": -1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "f807a6e2b6ed1656",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "navigationStyle": "default"
    },
    {
        "id": "adfdb0073bd846f6",
        "type": "ui-page",
        "name": "Page 2",
        "ui": "f807a6e2b6ed1656",
        "path": "/page2",
        "icon": "home",
        "layout": "grid",
        "theme": "5075a7d8e4947586",
        "order": 2,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "5075a7d8e4947586",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094CE",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]
4

@joepavitt I have confirmed this issue locally.

@RedTom

Can you please raise an issue? Also, are you seeing this on other nodes or just the switch node?

5

ok,
i raised an issue, hope i get it right,

i have only seen this with the ui-switch,
but i did not work much with htlm and css because of the lack of Experience.
beside the refresh problems with Android and the ui-templates (there are already issues open),
i just wanted to tweak the standard widgets a little bit.

can someone help me with my first question ?
icon and icon color ?

6

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