node-red-dashboard
node-red-dashboard copied to clipboard
node-red
Z order error with (in this instance?) colour picker
Current Behavior
I have several colour pickers in a group but when one is selected (by clicking the colour patch/button) the pop-up appears behind the other selectors (as per the pic)
If there is a way in the UI to control this, I didn't find it :(
Expected Behavior
Clicking the colour patch/button should open the picker on the frontmost layer
Clicking another colour patch/button will dismiss the original picker
So will clicking outside the group or pressing Esc
Steps To Reproduce
See example flow code
Example flow
[
{
"id": "618bf278f5b73cc9",
"type": "ui_colour_picker",
"z": "a60a5305dc8d26e9",
"name": "",
"label": "Night light colour",
"group": "9788c9b2a0490f3e",
"format": "hex",
"outformat": "object",
"showSwatch": true,
"showPicker": false,
"showValue": false,
"showHue": false,
"showAlpha": false,
"showLightness": true,
"square": "false",
"dynOutput": "false",
"order": 1,
"width": 0,
"height": 0,
"passthru": true,
"topic": "topic",
"topicType": "msg",
"className": "",
"x": 510,
"y": 260,
"wires": [
[
"21c4f7b73ac724c8",
"f2247275dd823cdb"
]
]
},
{
"id": "21c4f7b73ac724c8",
"type": "mqtt out",
"z": "a60a5305dc8d26e9",
"name": "",
"topic": "bathroom/mirror/nightLightCol",
"qos": "",
"retain": "",
"respTopic": "",
"contentType": "",
"userProps": "",
"correl": "",
"expiry": "",
"broker": "3f447ded17b259ee",
"x": 800,
"y": 260,
"wires": []
},
{
"id": "99cbe86ea34ac3d3",
"type": "mqtt out",
"z": "a60a5305dc8d26e9",
"name": "",
"topic": "bathroom/mirror/minCol",
"qos": "",
"retain": "",
"respTopic": "",
"contentType": "",
"userProps": "",
"correl": "",
"expiry": "",
"broker": "3f447ded17b259ee",
"x": 780,
"y": 500,
"wires": []
},
{
"id": "507eea4f59271095",
"type": "mqtt out",
"z": "a60a5305dc8d26e9",
"name": "",
"topic": "bathroom/mirror/hourCol",
"qos": "",
"retain": "",
"respTopic": "",
"contentType": "",
"userProps": "",
"correl": "",
"expiry": "",
"broker": "3f447ded17b259ee",
"x": 780,
"y": 560,
"wires": []
},
{
"id": "f2247275dd823cdb",
"type": "debug",
"z": "a60a5305dc8d26e9",
"name": "",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "payload",
"targetType": "msg",
"statusVal": "",
"statusType": "auto",
"x": 770,
"y": 160,
"wires": []
},
{
"id": "4f548abb3c3564da",
"type": "ui_colour_picker",
"z": "a60a5305dc8d26e9",
"name": "",
"label": "Background colour",
"group": "9788c9b2a0490f3e",
"format": "hex",
"outformat": "object",
"showSwatch": true,
"showPicker": false,
"showValue": false,
"showHue": false,
"showAlpha": false,
"showLightness": true,
"square": "false",
"dynOutput": "false",
"order": 2,
"width": 0,
"height": 0,
"passthru": true,
"topic": "topic",
"topicType": "msg",
"className": "",
"x": 500,
"y": 320,
"wires": [
[
"b59cf7e6d62e9c27",
"f2247275dd823cdb"
]
]
},
{
"id": "b59cf7e6d62e9c27",
"type": "mqtt out",
"z": "a60a5305dc8d26e9",
"name": "",
"topic": "bathroom/mirror/BGLightCol",
"qos": "",
"retain": "",
"respTopic": "",
"contentType": "",
"userProps": "",
"correl": "",
"expiry": "",
"broker": "3f447ded17b259ee",
"x": 800,
"y": 320,
"wires": []
},
{
"id": "48a83be4c50febe0",
"type": "ui_colour_picker",
"z": "a60a5305dc8d26e9",
"name": "",
"label": "Five minute tick colour",
"group": "9788c9b2a0490f3e",
"format": "hex",
"outformat": "object",
"showSwatch": true,
"showPicker": false,
"showValue": false,
"showHue": false,
"showAlpha": false,
"showLightness": true,
"square": "false",
"dynOutput": "false",
"order": 3,
"width": 0,
"height": 0,
"passthru": true,
"topic": "topic",
"topicType": "msg",
"className": "",
"x": 490,
"y": 380,
"wires": [
[
"4bbe80deb5540eb7",
"f2247275dd823cdb"
]
]
},
{
"id": "4bbe80deb5540eb7",
"type": "mqtt out",
"z": "a60a5305dc8d26e9",
"name": "",
"topic": "bathroom/mirror/fiveMinTickCol",
"qos": "",
"retain": "",
"respTopic": "",
"contentType": "",
"userProps": "",
"correl": "",
"expiry": "",
"broker": "3f447ded17b259ee",
"x": 810,
"y": 380,
"wires": []
},
{
"id": "f49408fee0b52e52",
"type": "ui_colour_picker",
"z": "a60a5305dc8d26e9",
"name": "",
"label": "Fifteen minute tick colour",
"group": "9788c9b2a0490f3e",
"format": "hex",
"outformat": "object",
"showSwatch": true,
"showPicker": false,
"showValue": false,
"showHue": false,
"showAlpha": false,
"showLightness": true,
"square": "false",
"dynOutput": "false",
"order": 4,
"width": 0,
"height": 0,
"passthru": true,
"topic": "topic",
"topicType": "msg",
"className": "",
"x": 480,
"y": 440,
"wires": [
[
"01a3585933b82e81",
"f2247275dd823cdb"
]
]
},
{
"id": "01a3585933b82e81",
"type": "mqtt out",
"z": "a60a5305dc8d26e9",
"name": "",
"topic": "bathroom/mirror/fifteenMinTickCol",
"qos": "",
"retain": "",
"respTopic": "",
"contentType": "",
"userProps": "",
"correl": "",
"expiry": "",
"broker": "3f447ded17b259ee",
"x": 820,
"y": 440,
"wires": []
},
{
"id": "af4efdb2f216ded1",
"type": "ui_colour_picker",
"z": "a60a5305dc8d26e9",
"name": "",
"label": "Minute hand colour",
"group": "9788c9b2a0490f3e",
"format": "hex",
"outformat": "string",
"showSwatch": true,
"showPicker": false,
"showValue": false,
"showHue": false,
"showAlpha": false,
"showLightness": true,
"square": "false",
"dynOutput": "false",
"order": 5,
"width": 0,
"height": 0,
"passthru": true,
"topic": "topic",
"topicType": "msg",
"className": "",
"x": 500,
"y": 500,
"wires": [
[
"99cbe86ea34ac3d3",
"f2247275dd823cdb"
]
]
},
{
"id": "12c269535780e74b",
"type": "ui_colour_picker",
"z": "a60a5305dc8d26e9",
"name": "",
"label": "Hour hand colour",
"group": "9788c9b2a0490f3e",
"format": "hex",
"outformat": "string",
"showSwatch": true,
"showPicker": false,
"showValue": false,
"showHue": false,
"showAlpha": false,
"showLightness": true,
"square": "false",
"dynOutput": "false",
"order": 6,
"width": 0,
"height": 0,
"passthru": true,
"topic": "topic",
"topicType": "msg",
"className": "",
"x": 510,
"y": 560,
"wires": [
[
"507eea4f59271095",
"f2247275dd823cdb"
]
]
},
{
"id": "9788c9b2a0490f3e",
"type": "ui_group",
"name": "Mirror settings",
"tab": "90d560824c17c506",
"order": 1,
"disp": true,
"width": "6",
"collapse": false,
"className": ""
},
{
"id": "3f447ded17b259ee",
"type": "mqtt-broker",
"name": "Mosquitto",
"broker": "192.168.7.245",
"port": "1883",
"clientid": "",
"usetls": false,
"protocolVersion": "5",
"keepalive": "60",
"cleansession": true,
"birthTopic": "",
"birthQos": "0",
"birthPayload": "",
"birthMsg": {},
"closeTopic": "",
"closeQos": "0",
"closePayload": "",
"closeMsg": {},
"willTopic": "",
"willQos": "0",
"willPayload": "",
"willMsg": {},
"sessionExpiry": ""
},
{
"id": "90d560824c17c506",
"type": "ui_tab",
"name": "Bathroom settings",
"icon": "dashboard",
"order": 2,
"disabled": false,
"hidden": false
}
]
Environment
- Node-RED version: 2.0.6
- Node.js version: v21.5.0
- npm version: 10.2.4
- Platform/OS: OpenSuse Tumbleweed
- Browser: Firefox 122.0 (64-bit)
Are you really using Node-RED 2.0.6?
The 2.2.x stream went out of maintenance in July 2023
Can you reproduce this on 3.1.5?
Or do you mean v2.0.6 of the Node-RED dashboard? If so this is the wrong repo
@hardillb Hey Ben , Yes, I'm afraid I was very backlevel running DietPi on a Pi4. I've upgraded now:
root@DietProot@DietPi:~# npm list
root@ /root
└── [email protected]
Dashboard is at 3.6.2
BUT, the help tab reports v2.2.3 despite rechecking my server installed version (3.1.5) and recycling editor web page (incl flushing the cache)
Either way, The original z-order issue persists with my current setup. Have I missed a package upgrade for a germane component?
Are you sure you have restarted the Node-RED instance that is actually running?
If the editor is still reporting 2.2.3 after reloading the editor then that is what is actually running.
By default Node-RED would not be installed under the root users home directory.
Please show the start of the Node-RED logs as it will print what version it is running.
Also the Platform/OS question is about where Node-RED is running so should be DietPi, not what OS you are running the browser on.
Either way this will need moving to the dashboard repository.
@hardillb I would transfer it to Dashboard repo but it seems I don't have the authority as I can't see the Transfer option in the right panel. If you have auth, I'm happy for you to transfer it for me