Skip to content

Align switches with labels of different length

Jump to bottom
bartbutenaers edited this page Feb 27, 2022 · 1 revision

When you have multiple switches beneath each other, which have labels of different length:

image

Then those labels will cause the switches not being aligned correctly:

image

This can be solved via CSS in a dashboard Template node, to tell your browser that all labels have a minimum width:

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

Of course this minimum width needs to be larger than then longest label, otherwise your layout will get messed up:

image

By increasing in this example the minimum width to 10em, the problem was solved:

image

Below you can find the example flow of this tutorial:

[{"id":"0ff17521763ba6a7","type":"ui_multistate_switch","z":"8e7be43f07e5c661","name":"Short label","group":"c333919.073ab7","order":2,"width":0,"height":0,"label":"Short label","stateField":"payload","enableField":"enable","passthroughField":"passthrough","inputMsgField":"inputmsg","rounded":true,"useThemeColors":false,"hideSelectedLabel":false,"multilineLabel":false,"passThrough":"never","inputMsg":"all","userInput":"enabled_show","options":[{"label":"On","value":"true","valueType":"bool","color":"#009933"},{"label":"Off","value":"false","valueType":"bool","color":"#999999"}],"topic":"","x":1010,"y":520,"wires":[[]]},{"id":"37fbfcfcbf949d7d","type":"ui_multistate_switch","z":"8e7be43f07e5c661","name":"A longer label","group":"c333919.073ab7","order":2,"width":0,"height":0,"label":"A longer label","stateField":"payload","enableField":"enable","passthroughField":"passthrough","inputMsgField":"inputmsg","rounded":true,"useThemeColors":false,"hideSelectedLabel":false,"multilineLabel":false,"passThrough":"never","inputMsg":"all","userInput":"enabled_show","options":[{"label":"On","value":"true","valueType":"bool","color":"#009933"},{"label":"Off","value":"false","valueType":"bool","color":"#999999"}],"topic":"","x":1020,"y":560,"wires":[[]]},{"id":"88b2648134fbe12c","type":"ui_multistate_switch","z":"8e7be43f07e5c661","name":"An again longer label","group":"c333919.073ab7","order":2,"width":0,"height":0,"label":"An again longer label","stateField":"payload","enableField":"enable","passthroughField":"passthrough","inputMsgField":"inputmsg","rounded":true,"useThemeColors":false,"hideSelectedLabel":false,"multilineLabel":false,"passThrough":"never","inputMsg":"all","userInput":"enabled_show","options":[{"label":"On","value":"true","valueType":"bool","color":"#009933"},{"label":"Off","value":"false","valueType":"bool","color":"#999999"}],"topic":"","x":1040,"y":600,"wires":[[]]},{"id":"b68c64e089a4c4a2","type":"ui_template","z":"8e7be43f07e5c661","group":"9f2da61.3353758","name":"CSS to align the multistate switches","order":2,"width":12,"height":1,"format":"<style>\n   /* Nicely align all multistate switches, even when the labels have different length.   */\n   /* See https://github.com/bartbutenaers/node-red-contrib-ui-multistate-switch/issues/8 */\n   .multistate-switch-label { min-width:10em; }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":1080,"y":680,"wires":[[]]},{"id":"c333919.073ab7","type":"ui_group","name":"Alignment demo","tab":"442a5a5b.2b97f4","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"9f2da61.3353758","type":"ui_group","name":"Flight","tab":"d6d3c358.5fb46","order":1,"disp":true,"width":"12","collapse":false},{"id":"442a5a5b.2b97f4","type":"ui_tab","name":"Lights","icon":"dashboard","disabled":false,"hidden":false},{"id":"d6d3c358.5fb46","type":"ui_tab","name":"Home","icon":"dashboard","order":32,"disabled":false,"hidden":false}]
Clone this wiki locally