Md-switch in template node 19.6 vs 20.5

Dashboard
1

Hi there, been awhile since my last visit.
started testing the new 20.5 version of node red yesterday, and discovered a different behavior on lots of tthings, but the one regarding color settings on md-switch got me pussled.

6on 6off 5on 5off css

td
td.PNG1336×27 3.83 KB

in version 19.6 the switch changes color as predicted, but in 20.5 it ignores the md-checked variable.
anyone have a clue to why?

2

can you paste the actual template code ? (between 2 lots of 3 backticks ``` ) so we can import it and test. Thanks

3

[{"id":"6fbb690e.026dc8","type":"ui_template","z":"10e78e6.2249672","group":"37595010.f47f2","name":"","order":18,"width":0,"height":0,"format":"<html lang=\"en-GB\">\n<style>\ntable { empty-cells: show; }\nmd-button.lagre { display: none; }\nmd-switch {\nposition: center; \nheight: 5px;\n}\nmd-switch .md-thumb {\n background-color: red;\n}\nmd-switch .md-bar {\n background-color: gray;\n}\nmd-switch .md-checked .md-thumb {\n background-color: darkgreen; \n}\nmd-switch .md-checked .md-thumb {\n background-color: lightgreen;\n}\n</style>\n<table cellpadding=\"1\" border=\"1\" id=\"table-23\" class=\"table-hover\" style=\"width: 100%; border-collapse: collapse; border: 1px solid black\">\n <thead>\n <tr>\n \n \n <th>Av/på</th>\n \n \n \n </tr>\n </thead>\n <tbody>\n <tr>\n \n <td><md-switch aria-label=\"tank\" class=\"md-switch\" ng-model=\"aktiv\" ng-change=\"send({payload : {row:$index, enabled:aktiv}})\" ng-checked=\"row.aktiv==='true'\" ></md-switch>\n </td>\n \n\n\n \n </tr>\n \n </tbody>\n</table>\n\n</html>\n","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":1045,"y":618,"wires":[[]]},{"id":"37595010.f47f2","type":"ui_group","z":"","name":"Group 1","tab":"3c06c23.3e2443e","order":1,"disp":true,"width":"10","collapse":false},{"id":"3c06c23.3e2443e","type":"ui_tab","name":"Tab 9","icon":"dashboard","order":9}]

here is the problematic code isolated from the table

4

That example works fine for me. Switches between red (off) and blue (on).

Using Vivaldi (Chromium based) latest build.

13 May 16:36:39 - [info] Node-RED version: v0.20.5
13 May 16:36:39 - [info] Node.js  version: v10.15.3
13 May 16:36:39 - [info] Windows_NT 10.0.17763 x64 LE
5

(On is supposed to be green )...
and can be if you get the CSS selector correct

[{"id":"ddd9826.5cf208","type":"ui_template","z":"68636f36.4163c","group":"831103fa.b7f0a","name":"","order":18,"width":"0","height":"0","format":"\n<style>\ntable { empty-cells: show; }\nmd-button.large { display: none; }\nmd-switch {\nposition: center; \nheight: 5px;\n}\nmd-switch .md-thumb {\n background-color: red;\n}\nmd-switch .md-bar {\n background-color: gray;\n}\nmd-switch.md-checked:not([disabled]) .md-bar {\n background-color: darkgreen !important; \n}\nmd-switch.md-checked:not([disabled]) .md-thumb {\n background-color: lightgreen !important;\n}\n</style>\n<table cellpadding=\"1\" border=\"1\" id=\"table-23\" class=\"table-hover\" style=\"width: 300px; border-collapse: collapse; border: 1px solid black\">\n<thead>\n<tr>\n<th>Av/på</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><md-switch aria-label=\"tank\" class=\"md-switch\" ng-model=\"aktiv\" ng-change=\"send({payload : {row:$index, enabled:aktiv}})\" ng-checked=\"row.aktiv==='true'\" ></md-switch>\n</td>\n</tr>\n</tbody>\n</table>\n\n","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":240,"y":640,"wires":[[]]},{"id":"831103fa.b7f0a","type":"ui_group","z":"","name":"Group 1","tab":"9c79f39c.5ed1c","order":1,"disp":true,"width":"10","collapse":false},{"id":"9c79f39c.5ed1c","type":"ui_tab","name":"Tab 9","icon":"dashboard","order":9}]
6

dceejay,
your correction of my simple code works great. thank you.

:slight_smile: