# \[ANNOUNCE\] node-red-contrib-ui-multistate-switch: version 1.1.0

**URL:** <https://discourse.nodered.org/t/announce-node-red-contrib-ui-multistate-switch-version-1-1-0/42034>\
**Category:** Share Your Nodes\
**Created:** [4 March 2021 16:52 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-multistate-switch-version-1-1-0/42034 "2021-03-04T16:52:25Z")\
**Posts on this page:** 12\
**Page:** 3

<div class="post-metadata">

**Author:** ![jodelkoenig](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jodelkoenig/32/44645_2.png) [@jodelkoenig](https://discourse.nodered.org/u/jodelkoenig)\
**Post date:** [12 June 2021 09:09 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-multistate-switch-version-1-1-0/42034/42 "2021-06-12T09:09:02Z")

</div>

No need to apologize @BartButenaers, not at all.

I intended to provide a kind and careful request and do not expect you to jump on it right away 🙂 Take your time.

And yes .. the example looks great. hehe

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [13 June 2021 05:01 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-multistate-switch-version-1-1-0/42034/43 "2021-06-13T05:01:48Z")

</div>

> [@BartButenaers](#):
>
> But I have forgotten how he managed to get the icon there.

I was cheating a bit.

You can have icons in current version, but it is not tested against different icon providers and different situations thus we can't say that icons are supported.  
But basics here, use at your own risk.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/5/75b7277ffce7a4d65c0c62bccfa5555309bb1863.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/9/1988deff232c93940aae5aab6da2ba7984310f42.png)

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [13 June 2021 05:21 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-multistate-switch-version-1-1-0/42034/44 "2021-06-13T05:21:31Z")

</div>

Thanks @hotNipi !!

> [@hotNipi](#):
>
> but it is not tested against different icon providers and different situations

If somebody has time to test this, that would be a very big help for us!!! Because then we could add this to our readme page with multiple examples...

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [13 June 2021 05:23 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-multistate-switch-version-1-1-0/42034/45 "2021-06-13T05:23:57Z")

</div>

Known that iconify icons will not work out of box.

---

<div class="post-metadata">

**Author:** ![eddee54455](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eddee54455/32/43350_2.png) [@eddee54455](https://discourse.nodered.org/u/eddee54455)\
**Post date:** [13 June 2021 10:26 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-multistate-switch-version-1-1-0/42034/46 "2021-06-13T10:26:12Z")

</div>

I love this switch!! Excellent!! Brilliant!!

An Idea though: Any chance of possibly 2 things:

1. The ability to re-order the buttons once the switch is created? Similar to this:  
 ![screenshot-192.168.0.118_1880-2021.06.13-12_13_46](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/4/246b47b67d8a63421317a82fb0b6f1d9ecda8d7f.png)

2. The possibility of allowing only a single option, this, when pressed/clicked, sends its payload as set up? Spot the odd one's out:  

While the standard UI button is functional, I way prefer and like yours, I am using it in preference to the other controls available, here is a screenshot of but one of the many controls I have implemented for the home auto system i am putting together:

 ![screenshot-192.168.0.118_1880-2021.06.13-12_22_23](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/9/b9838406a823642a7cc9974c5742abcb7d6b8f3b.png)

Thanks again for the awesome UI node!!  
Cheers  
Ed

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [13 June 2021 17:06 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-multistate-switch-version-1-1-0/42034/47 "2021-06-13T17:06:53Z")

</div>

1. Sortable option list - highly possible (already done and pushed to the dev branch)
2. Kind of no. Switching is by nature moving between states so having one state only takes away base rule of switch.

You can make your layout look better by aligning switches  
Add this CSS override and adjust the value of label min with if needed.

```auto
[{"id":"4dd32966.9d2668","type":"ui_template","z":"c0ddb509.b04f48","group":"93fae10c.09faa","name":"CSS","order":6,"width":0,"height":0,"format":"<style id=\"dashboard-custom-styles\">\n.multistate-switch-label {\n min-width: 60px;\n} \n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":650,"y":1460,"wires":[[]]},{"id":"93fae10c.09faa","type":"ui_group","name":"Default","tab":"6ff5405c.a8e6","order":1,"disp":true,"width":"6","collapse":false},{"id":"6ff5405c.a8e6","type":"ui_tab","name":"TEST","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![eddee54455](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eddee54455/32/43350_2.png) [@eddee54455](https://discourse.nodered.org/u/eddee54455)\
**Post date:** [14 June 2021 16:15 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-multistate-switch-version-1-1-0/42034/48 "2021-06-14T16:15:20Z")

</div>

@hotNipi

Thanks Heaps for the suggestion!! Implemented it successfully too!

Great news on the sortable list, that will make button changes way quicker!

As to option regarding:

> [@hotNipi](#):
>
> Switching is by nature moving between states

Agreed entirely, but with a disclaimer type request - "Push to make" single button type switch? Possibly with latching option? .... Pretty Please? ... Lol, no matter (Would be really nice though!), I have made a work around for myself by just setting the payload to a fixed value after the slide switch...

Thanks again for the hint and all the coding u and Bart are doing!!

Regds  
Ed

---

<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:** [14 June 2021 17:26 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-multistate-switch-version-1-1-0/42034/49 "2021-06-14T17:26:34Z")

</div>

That’s a button not a switch 🙂

---

<div class="post-metadata">

**Author:** ![bernhardkurz](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bernhardkurz/32/54126_2.png) [@bernhardkurz](https://discourse.nodered.org/u/bernhardkurz)\
**Post date:** [13 January 2022 13:52 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-multistate-switch-version-1-1-0/42034/50 "2022-01-13T13:52:49Z")

</div>

@BartButenaers and @hotNipi this is really great job you are doing here! i am using your multistate switch very much.

now i need to increase the size of the button and in dev tools (chrome) i found that changing

```auto
.multistate-switch-round {
    border-radius: 1em;
    height: 90%;
}

```

the button looks like i would need it  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/c/5c9a371f27c001eecf65b299fb989a38ffefb32b.png)

but when i insert into my template

```auto
<Style>
        .multistate-switch-container{
            /*display:flex;
            width:100%;
            margin:auto;*/
            height:100%;
        }
        .multistate-switch-round{
            height:90%;
        }
        .multistate-switch-body{
            /*pointer-events:auto;
            display: inline-flex;
            justify-content: flex-start;
            width: 100%;*/
            height:100%;
        }
    
</Style>

```

it shows up like that  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/4/446a1e5ba46284eadba92b0d21b7f51dd262b711.png)

any support would be appreciated  
again thanks for your effort

br bernhard

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [13 January 2022 19:30 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-multistate-switch-version-1-1-0/42034/51 "2022-01-13T19:30:01Z")

</div>

Well, in many cases the final resort is to use the` !important` flag to make your rules most powerful. Long story to talk but easy enough to just follow.

To make this kind of thing  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/d/7de4439efe3408b475aa5e6a2f5dcefb7c9504ef.png)

All you'll need is to adjust widget size to use 2 units height  
and this bit of CSS override

```auto
<style>
.multistate-switch-button {
    line-height: 5em !important;
}
.multistate-switch-slider {
    height: 4.6em !important;
}
</style>

```

---

<div class="post-metadata">

**Author:** ![bernhardkurz](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bernhardkurz/32/54126_2.png) [@bernhardkurz](https://discourse.nodered.org/u/bernhardkurz)\
**Post date:** [14 January 2022 22:43 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-multistate-switch-version-1-1-0/42034/52 "2022-01-14T22:43:17Z")

</div>

Damn, could have thought about that myself 😡 have to get deeper into css 😑

thank you man, you answer very quick ... chapeau

for the records my solution because its bit more flexible with % (or will i run into another knife with that?)

```auto
<Style>
        .multistate-switch-container{
            height:100% !important;
        }
        .multistate-switch-round{
            height:90% !important;
            top:6% !important;
        }
        .multistate-switch-body{
            height:100% !important;
            align-items: center !important;
        }
    
</Style>

```

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/3/234326c5054d19768df12cf2a0ee3607bca22d9a.png)

thank you very much for your hint

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [14 January 2022 22:47 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-multistate-switch-version-1-1-0/42034/53 "2022-01-14T22:47:41Z")

</div>

Well, the `em` is also sort of percentage but based on font size. To support known op systems and browsers, it takes to follow some kind of settled rules and solutions but for your case - if it works for you, it just works and is perfectly fine.

[Previous page](https://discourse.nodered.org/t/announce-node-red-contrib-ui-multistate-switch-version-1-1-0/42034.md?page=2)