# Multistate switch dimension

**URL:** <https://discourse.nodered.org/t/multistate-switch-dimension/92699>\
**Category:** Dashboard\
**Created:** [26 October 2024 18:12 UTC](https://discourse.nodered.org/t/multistate-switch-dimension/92699 "2024-10-26T18:12:23Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [26 October 2024 18:12 UTC](https://discourse.nodered.org/t/multistate-switch-dimension/92699/1 "2024-10-26T18:12:23Z")

</div>

Today, for the first time, I used some multistate switch in my dashboard.  
I like it but I have a problem of alignment (dimension) how you can see in the image ...

 ![img2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/8/380b1b9804c058d3120c149f77c12db5e540c337.png)

It's possible to have the same dimension (of the button) without invent imaginative labels to have the same dimension?

---

<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:** [26 October 2024 18:17 UTC](https://discourse.nodered.org/t/multistate-switch-dimension/92699/2 "2024-10-26T18:17:11Z")

</div>

Wiki page helps out [Align switches with labels of different length · bartbutenaers/node-red-contrib-ui-multistate-switch Wiki · GitHub](https://github.com/bartbutenaers/node-red-contrib-ui-multistate-switch/wiki/Align-switches-with-labels-of-different-length)

---

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [26 October 2024 18:19 UTC](https://discourse.nodered.org/t/multistate-switch-dimension/92699/3 "2024-10-26T18:19:02Z")

</div>

Thank you very much!

---

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [26 October 2024 19:09 UTC](https://discourse.nodered.org/t/multistate-switch-dimension/92699/4 "2024-10-26T19:09:34Z")

</div>

I'm trying to specific only some multistate switch not all, but I can't, please, can you write the correct syntax?

```auto
[node-id="fa9de2b4a710bcc3"] ???? multistate-switch-label { min-width:11em; }

```

---

<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:** [26 October 2024 19:13 UTC](https://discourse.nodered.org/t/multistate-switch-dimension/92699/5 "2024-10-26T19:13:37Z")

</div>

I'm away from computer.

---

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [26 October 2024 19:14 UTC](https://discourse.nodered.org/t/multistate-switch-dimension/92699/6 "2024-10-26T19:14:14Z")

</div>

Ah, ok, no problem .....

---

<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:** [26 October 2024 19:33 UTC](https://discourse.nodered.org/t/multistate-switch-dimension/92699/7 "2024-10-26T19:33:07Z")

</div>

Still the node I'd approach is correct but I don't understand those question marks in between.

If to change only only several, it takes to address those by node's Id, the css rule remains same.

---

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [26 October 2024 19:42 UTC](https://discourse.nodered.org/t/multistate-switch-dimension/92699/8 "2024-10-26T19:42:07Z")

</div>

The question marks was to ask the correct syntax, because I tried various ways but without success ....

---

<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:** [26 October 2024 19:52 UTC](https://discourse.nodered.org/t/multistate-switch-dimension/92699/9 "2024-10-26T19:52:35Z")

</div>

There should be examples shared how to target specific dashboard node. Try to search.

Ohh maybe your did but no solution. Sorry.

---

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [26 October 2024 19:54 UTC](https://discourse.nodered.org/t/multistate-switch-dimension/92699/10 "2024-10-26T19:54:41Z")

</div>

Ok, I won't bother you any further, thank you ...

---

<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:** [26 October 2024 19:58 UTC](https://discourse.nodered.org/t/multistate-switch-dimension/92699/11 "2024-10-26T19:58:09Z")

</div>

It is possible for sure but yeah, without computer can't point out what exactly it takes

---

<div class="post-metadata">

**Author:** ![MyRandomThoughts](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/myrandomthoughts/32/41085_2.png) [@MyRandomThoughts](https://discourse.nodered.org/u/MyRandomThoughts)\
**Post date:** [26 October 2024 22:55 UTC](https://discourse.nodered.org/t/multistate-switch-dimension/92699/12 "2024-10-26T22:55:19Z")

</div>

If you are just using two states (on/off), why not just use a standard switch node?

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [27 October 2024 00:08 UTC](https://discourse.nodered.org/t/multistate-switch-dimension/92699/13 "2024-10-27T00:08:35Z")

</div>

Here is an example of two multistate switches

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

Applying this CSS to it using a template

```auto
<style>
    .multistate-switch-label {
        min-width: 8em;
        max-width: 8em;
    }
</style>

```

gives

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/4/b41ee64789b4fadbc0e3d3580060f0a82f7b7e61.png)

If the template is of type "Widget in group" then the styling will apply to all multistate switches on that dashboard tab.  
If it is of type "Added to site header" it will apply globally.  
If you change the CSS selector to

```auto
ui-card-panel#Demo_Demo .multistate-switch-label

```

Then it will apply only to group Demo on tab Demo

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/e/4efa77e898e2577deb02de34080346a6a8170671.png)

---

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [27 October 2024 06:02 UTC](https://discourse.nodered.org/t/multistate-switch-dimension/92699/14 "2024-10-27T06:02:21Z")

</div>

> [@jbudd](#):
>
> If you change the CSS selector to
> 
> ```auto
> ui-card-panel#Demo_Demo .multistate-switch-label
> 
> ```
> 
> Then it will apply only to group Demo on tab Demo

Ok, this works for me even I would prefer to indicate one or more specific node ....

Thank you very much ....

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [27 October 2024 08:35 UTC](https://discourse.nodered.org/t/multistate-switch-dimension/92699/15 "2024-10-27T08:35:02Z")

</div>

> [@Giamma](#):
>
> I would prefer to indicate one or more specific node ....

OK well one of my switches has id d778d422e5a1ecf5

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/6/f6cee58dc46fc79698679503d88137cdb98a9f05.png)

Using the browser's Developer Tools (This is Firefox but they all have something similar) I can highlight this node and see that the selector needed is  
`#multiStateSwitchLabel_d778d422e5a1ecf5.multistate-switch-label`  
Note no spaces in this selector.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/7/172c58be3e2a767fe4349d649c92d9ed70b1a529.png)

---

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [27 October 2024 10:15 UTC](https://discourse.nodered.org/t/multistate-switch-dimension/92699/16 "2024-10-27T10:15:59Z")

</div>

Yessss, works fine and now I'm ok.  
Thanks again for the help (and your patience) ....

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [10 November 2024 10:16 UTC](https://discourse.nodered.org/t/multistate-switch-dimension/92699/17 "2024-11-10T10:16:27Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.