Multistate switch dimension

[Giamma]

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 ...

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

[hotNipi]

Wiki page helps out Align switches with labels of different length · bartbutenaers/node-red-contrib-ui-multistate-switch Wiki · GitHub

[Giamma]

Thank you very much!

[Giamma]

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

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

[hotNipi]

I'm away from computer.

[Giamma]

Ah, ok, no problem .....

[hotNipi]

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.

[Giamma]

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

[hotNipi]

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

Ohh maybe your did but no solution. Sorry.

[Giamma]

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

[hotNipi]

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

[MyRandomThoughts]

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

[jbudd]

Here is an example of two multistate switches

Applying this CSS to it using a template

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

gives

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

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

Then it will apply only to group Demo on tab Demo

[Giamma]

@jbudd

If you change the CSS selector to

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 ....

[jbudd]

@Giamma

I would prefer to indicate one or more specific node ....

OK well one of my switches has id d778d422e5a1ecf5

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.

[Giamma]

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