# Md-switch in template node 19.6 vs 20.5

**URL:** <https://discourse.nodered.org/t/md-switch-in-template-node-19-6-vs-20-5/11063>\
**Category:** Dashboard\
**Created:** [13 May 2019 11:29 UTC](https://discourse.nodered.org/t/md-switch-in-template-node-19-6-vs-20-5/11063 "2019-05-13T11:29:53Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![karlbo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/karlbo/32/68793_2.png) [@karlbo](https://discourse.nodered.org/u/karlbo)\
**Post date:** [13 May 2019 11:29 UTC](https://discourse.nodered.org/t/md-switch-in-template-node-19-6-vs-20-5/11063/1 "2019-05-13T11:29:54Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/4/41112d2f5c95c995fc94fa6145c90bb240a4603f.png) ![6off](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/4/4a756834bf89134241e52e2ff07bf172570b472d.png) ![5on](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/7/741a0e4653741f563f95f3195e447e67837d29d7.png) ![5off](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/e/e43b4c5be5fa7572e9147e004745e45f1d55aff5.png) ![css](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/0/007ea3f8b1cf22a72262623a0a11f2c90714a957.png)

 ![td](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/c/cb04a4d90823be006bab7da2df634a34c4f46a6f.png)

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?

---

<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:** [13 May 2019 12:09 UTC](https://discourse.nodered.org/t/md-switch-in-template-node-19-6-vs-20-5/11063/2 "2019-05-13T12:09:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![karlbo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/karlbo/32/68793_2.png) [@karlbo](https://discourse.nodered.org/u/karlbo)\
**Post date:** [13 May 2019 13:16 UTC](https://discourse.nodered.org/t/md-switch-in-template-node-19-6-vs-20-5/11063/3 "2019-05-13T13:16:26Z")

</div>

`[{"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

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [13 May 2019 15:39 UTC](https://discourse.nodered.org/t/md-switch-in-template-node-19-6-vs-20-5/11063/4 "2019-05-13T15:39:40Z")

</div>

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

Using Vivaldi (Chromium based) latest build.

```auto
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

```

---

<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:** [13 May 2019 16:27 UTC](https://discourse.nodered.org/t/md-switch-in-template-node-19-6-vs-20-5/11063/5 "2019-05-13T16:27:49Z")

</div>

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

```auto
[{"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}]

```

---

<div class="post-metadata">

**Author:** ![karlbo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/karlbo/32/68793_2.png) [@karlbo](https://discourse.nodered.org/u/karlbo)\
**Post date:** [14 May 2019 07:57 UTC](https://discourse.nodered.org/t/md-switch-in-template-node-19-6-vs-20-5/11063/6 "2019-05-14T07:57:32Z")

</div>

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

🙂
