How can I allineate sliders?

[GiovanniG]

Hi, I've different names which differs for lenght.. I tried to insert spaces to move the beginning of the cursor right as the logest name does, but they are ignored. I don't want to use __ for example, there is any invisibel char I can use? Or any other way? Thanks

[Christian-Me]

Only way I know and I use is place a text node as a label and use the slider without a label.

Feature request: Indent value for label/widget spacing per group

Hello, I like to discuss a feature for the dashboard to streamline / sort the placement of labels and actual widgets inside one group. currently if you place some widgets the position of the widget is not consistent: [image] For widgets with a label option the width of the widget is determined by the actual length of the label text. I like to suggest to add an indent parameter in the group definition do align all widgets (with a label) to one consistent vertical position. I think the indent…

As far as I know this didn’t get any further and most probably will not in the new future.
But the solution above is ok for me.

[GiovanniG]

thanks, the label is a trick that can be interesting, but can I disable it to not type nothing?

It would be necessary to just find a transparent char for spaces, but seems nothing is working

[Colin]

Leave it empty.

[E1cid]

you can use <pre> </pre> or css white-space : pre
then just pad with space
e.g

[{"id":"aa52642e.36932","type":"inject","z":"190c8195.72b3be","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"qwerty","payloadType":"str","x":180,"y":1040,"wires":[["e07fcc5c.4eea1"]]},{"id":"e07fcc5c.4eea1","type":"change","z":"190c8195.72b3be","name":"","rules":[{"t":"set","p":"label","pt":"msg","to":"$pad($$.payload, 20, \" \") ","tot":"jsonata"},{"t":"set","p":"payload","pt":"msg","to":"5","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":390,"y":1040,"wires":[["810c61c9.ea902","33fd474a.a75a68"]]},{"id":"810c61c9.ea902","type":"debug","z":"190c8195.72b3be","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":640,"y":1040,"wires":[]},{"id":"33fd474a.a75a68","type":"ui_slider","z":"190c8195.72b3be","name":"","label":"<pre>{{msg.label}}</pre>","tooltip":"","group":"8b5cde76.edd58","order":10,"width":0,"height":0,"passthru":true,"outs":"all","topic":"topic","topicType":"msg","min":0,"max":10,"step":1,"x":590,"y":1080,"wires":[[]]},{"id":"8b5cde76.edd58","type":"ui_group","name":"","tab":"8f03e639.85956","order":1,"disp":true,"width":"12","collapse":false},{"id":"8f03e639.85956","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

[edit] just for info you can also use &nbsp; as the pad, no <pre> required
e.g.

[{"id":"c6c7b22d.7083d8","type":"inject","z":"a3b92cc4.e3cb","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"qwerty","payloadType":"str","x":200,"y":480,"wires":[["2a85ce1f.85b472"]]},{"id":"2a85ce1f.85b472","type":"change","z":"a3b92cc4.e3cb","name":"","rules":[{"t":"set","p":"label","pt":"msg","to":"$replace($pad($$.payload, 20, \"#\"),\"#\", \" \")","tot":"jsonata"},{"t":"set","p":"payload","pt":"msg","to":"5","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":410,"y":480,"wires":[["758a035f.10176c","3a89db4f.60ba14"]]},{"id":"758a035f.10176c","type":"debug","z":"a3b92cc4.e3cb","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":620,"y":480,"wires":[]},{"id":"3a89db4f.60ba14","type":"ui_slider","z":"a3b92cc4.e3cb","name":"","label":"{{msg.label}}","tooltip":"","group":"2d4fe667.28f8ba","order":10,"width":0,"height":0,"passthru":true,"outs":"all","topic":"topic","topicType":"msg","min":0,"max":10,"step":1,"x":610,"y":520,"wires":[[]]},{"id":"2d4fe667.28f8ba","type":"ui_group","name":"demo","tab":"1caa8458.b17814","order":1,"disp":true,"width":"12","collapse":false},{"id":"1caa8458.b17814","type":"ui_tab","name":"Demo","icon":"dashboard","disabled":false,"hidden":false}]

JSONata expression $replace($pad($$.payload, 20, "#"),"#", " ")

[jbudd]

You can make the slider label fixed width with a template.

<style>
#TABNAME_GROUPNAME_cards .nr-dashboard-slider p.label {
   width: 70%; 
   max-width: 70%;
   min-width: 70%;
   overflow: hidden;
}
</style>

(change TABNAME and GROUPNAME to match your dashboard)

[GiovanniG]

thanks a lot mates all of you for the lovely support!
I consider the template solution the coolest, it works perfectly, amazing!

[GiovanniG]

I post again, what happened in ths forum? I can't see more the intruments buttons, I can't edit, I can't use the code button (and I don't know what char it generates to do it manually ((

Hi, for some reasons the template is not working more, it is properly located into the group.. also in layout I don't see problems. It was working, now not more, what can happened?
Thanks

[{"id":"4c10d1d8.76f118","type":"ui_switch","z":"cc2c1666.3d904","name":"Salotto-sw","label":"","tooltip":"","group":"6d911a9b.e39804","order":1,"width":0,"height":0,"passthru":false,"decouple":"true","topic":"Dashboard","topicType":"str","style":"","onvalue":"true","onvalueType":"bool","onicon":"wb_incandescent","oncolor":"yellow","offvalue":"false","offvalueType":"bool","officon":"wb_incandescent","offcolor":"gray","animate":true,"className":"","x":3050,"y":760,"wires":[["5fae33a5.c4ddc4"]]},{"id":"f87e7bc3.3a347","type":"ui_slider","z":"cc2c1666.3d904","name":"","label":"Salotto","tooltip":"","group":"84144ed1.dad0a","order":1,"width":0,"height":0,"passthru":false,"outs":"end","topic":"Dashboard","topicType":"str","min":0,"max":"100","step":1,"x":3040,"y":800,"wires":[["5fae33a5.c4ddc4"]]},{"id":"8ebc0484.bee0d","type":"ui_template","z":"cc2c1666.3d904","group":"84144ed1.dad0a","name":"","order":17,"width":0,"height":0,"format":"<style>\n#Franco_1Colonna_cards.nr-dashboard-cardcontainer .nr-dashboard-slider p.label {\n   width: 39%; \n   max-width: 39%;\n   min-width: 39%;\n   overflow: hidden;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":3030,"y":700,"wires":[[]]},{"id":"6d911a9b.e39804","type":"ui_group","name":"2Colonna","tab":"ef482f31.2d1628","order":3,"disp":false,"width":"1","collapse":false},{"id":"84144ed1.dad0a","type":"ui_group","name":"1Colonna","tab":"ef482f31.2d1628","order":1,"disp":false,"width":"9","collapse":false},{"id":"ef482f31.2d1628","type":"ui_tab","name":"Pannello Domotica","icon":"dashboard","order":2,"disabled":false,"hidden":true}]

EDIT: I can't see buttons at all but moving with mouse the tips helped me find that

[jbudd]

Fix the Hidden option on Panello Domotica tab.

[GiovanniG]

I did it but nothing changed..

[jbudd]

Your template contains
#Franco_1Colonna_cards.nr-dashboard-cardcontainer .nr-dashboard-slider p.label {

But your Dashboard tab and group are
#Pannello_Domotica_1Colonna_cards.nr-dashboard-cardcontainer

The styling is only applied on tab Franco

[GiovanniG]

You absolutely right, I had to figure out myself, sorry, big mistake from my side ( I've changed names and forgot to add new name there :((