Hi, I', looking to create a touch interface that has reset buttons. I'd like to use slide to confirm ie:
There is quite a lot of those here for example, but I don't really know how to integrate..
Has anybody already done that?
I guess I could make a slider with only two values and set it back to 0 with a delay, but looking for some other opinions?
Thanks
For the moment I have created a logic that works with the original slider node + modified css a bit:
[{"id":"e19847deb1e85087","type":"ui_chart","z":"452ab868.195118","name":"","group":"da746eb3a7a1ff66","order":0,"width":0,"height":0,"label":"","chartType":"line","legend":"false","xformat":"HH:mm","interpolate":"bezier","nodata":"","dot":false,"ymin":"0","ymax":"","removeOlder":"12","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#fff76b","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"x":550,"y":280,"wires":[[]]},{"id":"cbe79e1ca18d6cc0","type":"ui_slider","z":"452ab868.195118","name":"","label":"","tooltip":"","group":"da746eb3a7a1ff66","order":1,"width":0,"height":0,"passthru":false,"outs":"end","topic":"","min":"0","max":"10","step":"0.1","x":130,"y":240,"wires":[["3c96b8d2203f7a25","7aaa14f2a1ec7808"]]},{"id":"8d54589ffedf0878","type":"change","z":"452ab868.195118","name":"set 0","rules":[{"t":"set","p":"payload","pt":"msg","to":"0","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":130,"y":200,"wires":[["cbe79e1ca18d6cc0"]]},{"id":"3c96b8d2203f7a25","type":"delay","z":"452ab868.195118","name":"delay","pauseType":"delay","timeout":"1","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"allowrate":false,"outputs":1,"x":270,"y":240,"wires":[["8d54589ffedf0878"]]},{"id":"7aaa14f2a1ec7808","type":"switch","z":"452ab868.195118","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"10","vt":"num"},{"t":"lt","v":"10","vt":"num"}],"checkall":"true","repair":false,"outputs":2,"x":270,"y":280,"wires":[["4e12b2467f6ba1e4"],[]],"outputLabels":["10","null"]},{"id":"4e12b2467f6ba1e4","type":"change","z":"452ab868.195118","name":"10 > [ ]","rules":[{"t":"change","p":"payload","pt":"msg","from":"10","fromt":"num","to":"[]","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":410,"y":280,"wires":[["e19847deb1e85087"]]},{"id":"da746eb3a7a1ff66","type":"ui_group","name":"A","tab":"6e7f9da.d28aee4","order":1,"disp":true,"width":"8","collapse":true},{"id":"6e7f9da.d28aee4","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
The problem
The whole track is touch/click sensitive, not only the touch target. So accidental reset can still happen, as no sliding/swiping movement is necessary.
Maybe need a sequence of tests eg >=3 and <=5, then 6 and 8. And then 10
Hi, thank you for the suggestion!
Right now the switch node is configured to discard (send to empty junction) all results that are under 10.
It seems that the behavior of the slider stays the same if I add the additional tests.
Also the slider has 100 steps for smoothness, if I only gave it two values it would snap to max after 51% of sliding.
It is very hard to get such thing working smoothly.
I did something but it is not reliable. Many times the slider just does not like to be dragged, it loses the focus and the state is unknown.
I have no more time to play with it. But you may try ..
[
{
"id": "bdc44b29.79d388",
"type": "ui_template",
"z": "98fb9802851faeed",
"group": "20ae1040.3cf58",
"name": "confirm slider based on md-slider",
"order": 1,
"width": "6",
"height": "1",
"format": "<div class=\"confirm-slider-container\" >\n \n <md-slider id=\"{{'slider_'+$id}}\" ng-mousedown=\"down()\" ng-model=\"slidervalue\" step=\"0.01\" min=\"0\" max=\"1\" value=\"0.1\" aria-label=\"confirm-slider\"></md-slider>\n<div class=\"confirm-slider-label\">Slide to confirm</div>\n</div>\n<style>\n.confirm-slider-container{\n position:relative;\n}\n.confirm-slider-label{\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n text-align: center;\n line-height: 29px;\n pointer-events: none;\n\n}\n.confirm-slider-container > md-slider{\n height:40px;\n margin-left: 8px;\n margin-right: 8px;\n top:0px;\n pointer-events:none;\n}\n.confirm-slider-container > md-slider .md-track-container {\n width: 100%;\n position: absolute;\n top: 0px;\n height: 32px; \n}\n.confirm-slider-container > md-slider .md-track.md-track{\n border-radius:32px; \n background: gray;\n}\n.confirm-slider-container > md-slider .md-track.md-track-fill{\n position:relative;\n background:green;\n border-radius:32px;\n pointer-events:all;\n min-width:40px;\n}\n.confirm-slider-container > md-slider .md-track.md-track-fill:after{\n position:absolute;\n content:'➪';\n top:4px;\n right:10px;\n\n}\n.confirm-slider-container > md-slider .md-thumb:after {\n visibility:hidden; \n}\n.confirm-slider-container > md-slider .md-focus-ring{\n visibility:hidden !important;\n}\n.confirm-slider-container > md-slider .md-thumb {\n transform: scale(1) !important;\n background:transparent;\n pointer-events: all;\n}\n</style>\n\n<script>\n(function(scope) {\n\n let isDown = false\n scope.slidervalue = 0.1\n\n scope.$watch('slidervalue', function(slidervalue) {\n if (slidervalue) { \n if(slidervalue < 0.1){\n scope.slidervalue = 0.1\n }\n }\n })\n scope.down = function(){\n if(isDown){\n return\n }\n\n isDown = true\n scope.send({payload:'moving',topic:'confirm-slider'})\n document.addEventListener('mouseup', scope.up);\n }\n\n scope.up = function(){ \n document.removeEventListener('mouseup', scope.up); \n if(scope.slidervalue >= .9){ \n scope.send({payload:'confirm',topic:'confirm-slider'}) \n scope.slidervalue = 1\n }\n else{\n scope.send({payload:'try again',topic:'confirm-slider'})\n scope.slidervalue = 0.1\n } \n isDown = false \n }\n \n \n scope.$watch('msg', function(msg) {\n if (msg) {\n if(msg.topic=='confirm-slider'){//ignore internal messages\n return\n } \n scope.slidervalue = 0.1\n }\n });\n})(scope);\n</script>",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 330,
"y": 610,
"wires": [
[
"b2c4f7a71c209c35",
"30bfa6e3bb0d3110"
]
]
},
{
"id": "b2c4f7a71c209c35",
"type": "ui_text",
"z": "98fb9802851faeed",
"group": "20ae1040.3cf58",
"order": 3,
"width": 0,
"height": 0,
"name": "",
"label": "status",
"format": "{{msg.payload}}",
"layout": "row-spread",
"className": "",
"x": 600,
"y": 610,
"wires": []
},
{
"id": "30bfa6e3bb0d3110",
"type": "switch",
"z": "98fb9802851faeed",
"name": "if confirm",
"property": "payload",
"propertyType": "msg",
"rules": [
{
"t": "eq",
"v": "confirm",
"vt": "str"
}
],
"checkall": "true",
"repair": false,
"outputs": 1,
"x": 240,
"y": 710,
"wires": [
[
"d9fd9d3359222623"
]
]
},
{
"id": "1df23dbb63e2937c",
"type": "trigger",
"z": "98fb9802851faeed",
"name": "reset 2s",
"op1": "",
"op2": "reset",
"op1type": "nul",
"op2type": "str",
"duration": "2",
"extend": true,
"overrideDelay": false,
"units": "s",
"reset": "",
"bytopic": "all",
"topic": "topic",
"outputs": 1,
"x": 560,
"y": 710,
"wires": [
[
"bdc44b29.79d388"
]
]
},
{
"id": "d9fd9d3359222623",
"type": "change",
"z": "98fb9802851faeed",
"name": "",
"rules": [
{
"t": "set",
"p": "topic",
"pt": "msg",
"to": "reset",
"tot": "str"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 400,
"y": 710,
"wires": [
[
"1df23dbb63e2937c"
]
]
},
{
"id": "20ae1040.3cf58",
"type": "ui_group",
"name": "Slider",
"tab": "6b520bda.e997a4",
"order": 1,
"disp": true,
"width": "6",
"collapse": false,
"className": ""
},
{
"id": "6b520bda.e997a4",
"type": "ui_tab",
"name": "Testing",
"icon": "dashboard",
"order": 1,
"disabled": false,
"hidden": false
}
]
EDIT: Made it a bit bigger and added a label to maybe indicate behavior.
Ok, aitäh!
On safari 15.6.1 macos it works as it should, on safari ios not really. My target machine is MS Surface + Chrome, but I haven't aquired it yet so can't test yet.
Nice!
It seems that it did have some hiccups while I was modifying it, but now it seems to be stable. Nice that I can put many on the same page.
I did modify the CSS a bit to hide the "Slide to confirm" text behind the green curtain (the slider label is now behind everything, but the slider track background is almost transparent, so it shows through)
[{"id":"751182213762fbb9","type":"ui_template","z":"56b086a7341ea71f","group":"20ae1040.3cf58","name":"confirm slider based on md-slider","order":1,"width":"6","height":"1","format":"<div class=\"confirm-slider-container\" >\n \n <md-slider id=\"{{'slider_'+$id}}\" ng-mousedown=\"down()\" ng-model=\"slidervalue\" step=\"0.01\" min=\"0\" max=\"1\" value=\"0.1\" aria-label=\"confirm-slider\"></md-slider>\n <div class=\"confirm-slider-label\">Slide to confirm</div>\n</div>\n<style>\n.confirm-slider-container{\n position:relative;\n}\n.confirm-slider-label{\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n text-align: center;\n line-height: 29px;\n pointer-events: none;\n z-index:0;\n\n}\n.confirm-slider-container > md-slider{\n height:40px;\n margin-left: 8px;\n margin-right: 8px;\n top:0px;\n pointer-events:none;\n z-index:1;\n}\n.confirm-slider-container > md-slider .md-track-container {\n width: 100%;\n position: absolute;\n top: 0px;\n height: 32px; \n}\n.confirm-slider-container > md-slider .md-track.md-track{\n border-radius:32px; \n background: rgba(12 12 12 .2);\n}\n.confirm-slider-container > md-slider .md-track.md-track-fill{\n position:relative;\n background:green;\n border-radius:32px;\n pointer-events:all;\n min-width:40px;\n}\n.confirm-slider-container > md-slider .md-track.md-track-fill:after{\n position:absolute;\n content:'➡︎';\n font-size:20px;\n top:5px;\n right:10px;\n\n}\n.confirm-slider-container > md-slider .md-thumb:after {\n visibility:hidden; \n}\n.confirm-slider-container > md-slider .md-focus-ring{\n visibility:hidden !important;\n}\n.confirm-slider-container > md-slider .md-thumb {\n transform: scale(1) !important;\n background:transparent;\n pointer-events: all;\n \n}\n</style>\n\n<script>\n(function(scope) {\n\n let isDown = false\n scope.slidervalue = 0.1\n\n scope.$watch('slidervalue', function(slidervalue) {\n if (slidervalue) { \n if(slidervalue < 0.1){\n scope.slidervalue = 0.1\n }\n }\n })\n scope.down = function(){\n if(isDown){\n return\n }\n\n isDown = true\n scope.send({payload:'moving',topic:'confirm-slider'})\n document.addEventListener('mouseup', scope.up);\n }\n\n scope.up = function(){ \n document.removeEventListener('mouseup', scope.up); \n if(scope.slidervalue >= .99){ \n scope.send({payload:'confirm',topic:'confirm-slider'}) \n scope.slidervalue = 1\n }\n else{\n scope.send({payload:'try again',topic:'confirm-slider'})\n scope.slidervalue = 0.1\n } \n isDown = false \n }\n \n \n scope.$watch('msg', function(msg) {\n if (msg) {\n if(msg.topic=='confirm-slider'){//ignore internal messages\n return\n } \n scope.slidervalue = 0.1\n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":260,"y":720,"wires":[["b2eca3d6531783de","02147c29040fd6df"]]},{"id":"b2eca3d6531783de","type":"ui_text","z":"56b086a7341ea71f","group":"20ae1040.3cf58","order":3,"width":0,"height":0,"name":"","label":"status","format":"{{msg.payload}}","layout":"row-spread","x":530,"y":720,"wires":[]},{"id":"02147c29040fd6df","type":"switch","z":"56b086a7341ea71f","name":"if confirm","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"confirm","vt":"str"}],"checkall":"true","repair":false,"outputs":1,"x":170,"y":820,"wires":[["944e3df19515e711"]]},{"id":"4f617b24a045bb07","type":"trigger","z":"56b086a7341ea71f","name":"reset 2s","op1":"","op2":"reset","op1type":"nul","op2type":"str","duration":"2","extend":true,"overrideDelay":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":490,"y":820,"wires":[["751182213762fbb9"]]},{"id":"944e3df19515e711","type":"change","z":"56b086a7341ea71f","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"reset","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":330,"y":820,"wires":[["4f617b24a045bb07"]]},{"id":"20ae1040.3cf58","type":"ui_group","name":"Slider","tab":"6b520bda.e997a4","order":1,"disp":true,"width":"6","collapse":false},{"id":"6b520bda.e997a4","type":"ui_tab","name":"Testing","icon":"dashboard","order":3,"disabled":false,"hidden":false}]
If you are using more than one, it is reasonable to move the styles out to separated template. Otherwise you are declaring same styles all over and over. Well, the last one wins of course but if you ever need to change something, it takes to change it for all of them. And if you make some mistakes, it is too hard to find.
Example with two and separated CSS and a small bonus 
[
{
"id": "bdc44b29.79d388",
"type": "ui_template",
"z": "98fb9802851faeed",
"group": "20ae1040.3cf58",
"name": "confirm slider based on md-slider",
"order": 1,
"width": "6",
"height": "1",
"format": "<div class=\"confirm-slider-container\" >\n <div class=\"confirm-slider-label\">Slide to confirm</div>\n <md-slider id=\"{{'slider_'+$id}}\" ng-mousedown=\"down()\" data-conent=\"OK\" ng-model=\"slidervalue\" step=\"0.01\" min=\"0\" max=\"1\" value=\"0.1\" aria-label=\"confirm-slider\"></md-slider>\n</div>\n\n<script>\n(function(scope) {\n let isDown = false\n scope.slidervalue = 0.01 \n scope.$watch('slidervalue', function(slidervalue) {\n if (slidervalue) { \n if(slidervalue < 0.1){\n scope.slidervalue = 0.1\n }\n let c = scope.slidervalue >= 1 ? '✓' : '➪'\n $(\"#slider_\"+scope.$id).find('.md-track-fill').attr('data-content',c);\n }\n })\n scope.down = function(){\n if(isDown){\n return\n }\n\n isDown = true\n scope.send({payload:'moving',topic:'confirm-slider'})\n document.addEventListener('mouseup', scope.up);\n }\n\n scope.up = function(){ \n document.removeEventListener('mouseup', scope.up); \n if(scope.slidervalue >= .9){ \n scope.send({payload:'confirm',topic:'confirm-slider'}) \n scope.slidervalue = 1;\n \n \n }\n else{\n scope.send({payload:'try again',topic:'confirm-slider'})\n scope.slidervalue = 0.1\n \n } \n isDown = false \n }\n \n \n scope.$watch('msg', function(msg) {\n if (msg) {\n if(msg.topic=='confirm-slider'){//ignore internal messages\n return\n } \n scope.slidervalue = 0.1\n }\n });\n})(scope);\n</script>",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 330,
"y": 610,
"wires": [
[
"b2c4f7a71c209c35",
"30bfa6e3bb0d3110"
]
]
},
{
"id": "b2c4f7a71c209c35",
"type": "ui_text",
"z": "98fb9802851faeed",
"group": "20ae1040.3cf58",
"order": 3,
"width": 0,
"height": 0,
"name": "",
"label": "status",
"format": "{{msg.payload}}",
"layout": "row-spread",
"className": "",
"x": 600,
"y": 610,
"wires": []
},
{
"id": "30bfa6e3bb0d3110",
"type": "switch",
"z": "98fb9802851faeed",
"name": "if confirm",
"property": "payload",
"propertyType": "msg",
"rules": [
{
"t": "eq",
"v": "confirm",
"vt": "str"
}
],
"checkall": "true",
"repair": false,
"outputs": 1,
"x": 260,
"y": 700,
"wires": [
[
"d9fd9d3359222623"
]
]
},
{
"id": "1df23dbb63e2937c",
"type": "trigger",
"z": "98fb9802851faeed",
"name": "reset 2s",
"op1": "",
"op2": "reset",
"op1type": "nul",
"op2type": "str",
"duration": "2",
"extend": true,
"overrideDelay": false,
"units": "s",
"reset": "",
"bytopic": "all",
"topic": "topic",
"outputs": 1,
"x": 580,
"y": 700,
"wires": [
[
"bdc44b29.79d388"
]
]
},
{
"id": "d9fd9d3359222623",
"type": "change",
"z": "98fb9802851faeed",
"name": "",
"rules": [
{
"t": "set",
"p": "topic",
"pt": "msg",
"to": "reset",
"tot": "str"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 420,
"y": 700,
"wires": [
[
"1df23dbb63e2937c"
]
]
},
{
"id": "4490bd001d2c33ee",
"type": "ui_template",
"z": "98fb9802851faeed",
"group": "20ae1040.3cf58",
"name": "confirm-slider CSS",
"order": 9,
"width": 0,
"height": 0,
"format": "<style>\n .confirm-slider-container {\n position: relative;\n }\n\n .confirm-slider-label {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n text-align: center;\n line-height: 29px;\n pointer-events: none;\n z-index: 0;\n\n }\n\n .confirm-slider-container>md-slider {\n height: 40px;\n margin-left: 8px;\n margin-right: 8px;\n top: 0px;\n pointer-events: none;\n z-index: 1;\n }\n\n .confirm-slider-container>md-slider .md-track-container {\n width: 100%;\n position: absolute;\n top: 0px;\n height: 32px;\n }\n\n .confirm-slider-container>md-slider .md-track.md-track {\n border-radius: 32px;\n background: rgba(12 12 12 .2);\n }\n\n .confirm-slider-container>md-slider .md-track.md-track-fill {\n position: relative;\n background: green;\n border-radius: 32px;\n pointer-events: all;\n min-width: 40px;\n }\n\n .confirm-slider-container>md-slider .md-track.md-track-fill:after {\n position: absolute;\n content: attr(data-content);\n font-size: 20px;\n top: 2px;\n right: 10px;\n\n }\n\n .confirm-slider-container>md-slider .md-thumb:after {\n visibility: hidden;\n }\n\n .confirm-slider-container>md-slider .md-focus-ring {\n visibility: hidden !important;\n }\n\n .confirm-slider-container>md-slider .md-thumb {\n transform: scale(1) !important;\n background: transparent;\n pointer-events: all;\n\n }\n</style>",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "global",
"className": "",
"x": 280,
"y": 560,
"wires": [
[]
]
},
{
"id": "83a24a1d30e1135e",
"type": "ui_template",
"z": "98fb9802851faeed",
"group": "20ae1040.3cf58",
"name": "confirm slider based on md-slider",
"order": 1,
"width": "6",
"height": "1",
"format": "<div class=\"confirm-slider-container\" >\n <div class=\"confirm-slider-label\">Slide to right to confirm</div>\n <md-slider id=\"{{'slider_'+$id}}\" ng-mousedown=\"down()\" data-conent=\"OK\" ng-model=\"slidervalue\" step=\"0.01\" min=\"0\" max=\"1\" value=\"0.1\" aria-label=\"confirm-slider\"></md-slider>\n</div>\n\n<script>\n(function(scope) {\n let isDown = false\n scope.slidervalue = 0.01 \n scope.$watch('slidervalue', function(slidervalue) {\n if (slidervalue) { \n if(slidervalue < 0.1){\n scope.slidervalue = 0.1\n }\n let c = scope.slidervalue >= 1 ? '✓' : '➪'\n $(\"#slider_\"+scope.$id).find('.md-track-fill').attr('data-content',c);\n }\n })\n scope.down = function(){\n if(isDown){\n return\n }\n\n isDown = true\n scope.send({payload:'moving',topic:'confirm-slider'})\n document.addEventListener('mouseup', scope.up);\n }\n\n scope.up = function(){ \n document.removeEventListener('mouseup', scope.up); \n if(scope.slidervalue >= .9){ \n scope.send({payload:'confirm',topic:'confirm-slider'}) \n scope.slidervalue = 1;\n \n \n }\n else{\n scope.send({payload:'try again',topic:'confirm-slider'})\n scope.slidervalue = 0.1\n \n } \n isDown = false \n }\n \n \n scope.$watch('msg', function(msg) {\n if (msg) {\n if(msg.topic=='confirm-slider'){//ignore internal messages\n return\n } \n scope.slidervalue = 0.1\n }\n });\n})(scope);\n</script>",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 330,
"y": 740,
"wires": [
[
"99ac61604c06bc59",
"e7d804325b4d0c00"
]
]
},
{
"id": "99ac61604c06bc59",
"type": "ui_text",
"z": "98fb9802851faeed",
"group": "20ae1040.3cf58",
"order": 3,
"width": 0,
"height": 0,
"name": "",
"label": "status",
"format": "{{msg.payload}}",
"layout": "row-spread",
"className": "",
"x": 600,
"y": 740,
"wires": []
},
{
"id": "e7d804325b4d0c00",
"type": "switch",
"z": "98fb9802851faeed",
"name": "if confirm",
"property": "payload",
"propertyType": "msg",
"rules": [
{
"t": "eq",
"v": "confirm",
"vt": "str"
}
],
"checkall": "true",
"repair": false,
"outputs": 1,
"x": 260,
"y": 830,
"wires": [
[
"1db7ed42401c5184"
]
]
},
{
"id": "a920f5344520a12e",
"type": "trigger",
"z": "98fb9802851faeed",
"name": "reset 2s",
"op1": "",
"op2": "reset",
"op1type": "nul",
"op2type": "str",
"duration": "2",
"extend": true,
"overrideDelay": false,
"units": "s",
"reset": "",
"bytopic": "all",
"topic": "topic",
"outputs": 1,
"x": 580,
"y": 830,
"wires": [
[
"83a24a1d30e1135e"
]
]
},
{
"id": "1db7ed42401c5184",
"type": "change",
"z": "98fb9802851faeed",
"name": "",
"rules": [
{
"t": "set",
"p": "topic",
"pt": "msg",
"to": "reset",
"tot": "str"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 420,
"y": 830,
"wires": [
[
"a920f5344520a12e"
]
]
},
{
"id": "20ae1040.3cf58",
"type": "ui_group",
"name": "Slider",
"tab": "6b520bda.e997a4",
"order": 1,
"disp": true,
"width": "6",
"collapse": false,
"className": ""
},
{
"id": "6b520bda.e997a4",
"type": "ui_tab",
"name": "Testing",
"icon": "dashboard",
"order": 1,
"disabled": false,
"hidden": false
}
]
Aitäh! Good idea for the separate css, didn't think of it allthough I already have one to avoid selecting text by accident:
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
html {
touch-action: none;
}
For some reason the checkmarks don't show in safari macos nor firefox / chrome on windows!
You may try some other characters or maybe "OK" or something then. I don't have any I device to try ..
It was all in your explanation! As I kept my original modified node on the same layout it's css overrode the new css 
Lesson learned 
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy