# How can I allineate sliders?
**URL:** https://discourse.nodered.org/t/how-can-i-allineate-sliders/51238
**Category:** Dashboard
**Created:** [19 September 2021 13:54 UTC](https://discourse.nodered.org/t/how-can-i-allineate-sliders/51238 "2021-09-19T13:54:23Z")
**Posts on this page:** 13
**Page:** 1
### Author:  [@GiovanniG](https://discourse.nodered.org/u/GiovanniG)
#### Post date: [19 September 2021 13:54 UTC](https://discourse.nodered.org/t/how-can-i-allineate-sliders/51238/1 "2021-09-19T13:54:23Z")
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
---
### Author:  [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)
#### Post date: [19 September 2021 13:59 UTC](https://discourse.nodered.org/t/how-can-i-allineate-sliders/51238/2 "2021-09-19T13:59:55Z")
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](https://discourse.nodered.org/t/feature-request-indent-value-for-label-widget-spacing-per-group/45786):
>
> 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: 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.
---
### Author:  [@GiovanniG](https://discourse.nodered.org/u/GiovanniG)
#### Post date: [19 September 2021 14:14 UTC](https://discourse.nodered.org/t/how-can-i-allineate-sliders/51238/3 "2021-09-19T14:14:16Z")
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
---
### Author:  [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [19 September 2021 14:40 UTC](https://discourse.nodered.org/t/how-can-i-allineate-sliders/51238/4 "2021-09-19T14:40:24Z")
Leave it empty.
---
### Author:  [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [19 September 2021 14:45 UTC](https://discourse.nodered.org/t/how-can-i-allineate-sliders/51238/5 "2021-09-19T14:45:21Z")
you can use \ \ or css white-space : pre
then just pad with space
e.g
```auto
[{"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":"{{msg.label}}","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 as the pad, no \ required
e.g.
```auto
[{"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, "#"),"#", " ")`
---
### Author:  [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [19 September 2021 14:48 UTC](https://discourse.nodered.org/t/how-can-i-allineate-sliders/51238/6 "2021-09-19T14:48:00Z")
You can make the slider label fixed width with a template.
```auto
```
(change TABNAME and GROUPNAME to match your dashboard)
---
### Author:  [@GiovanniG](https://discourse.nodered.org/u/GiovanniG)
#### Post date: [19 September 2021 15:00 UTC](https://discourse.nodered.org/t/how-can-i-allineate-sliders/51238/7 "2021-09-19T15:00:57Z")
thanks a lot mates all of you for the lovely support!
I consider the template solution the coolest, it works perfectly, amazing!
---
### Author:  [@GiovanniG](https://discourse.nodered.org/u/GiovanniG)
#### Post date: [26 September 2021 18:18 UTC](https://discourse.nodered.org/t/how-can-i-allineate-sliders/51238/9 "2021-09-26T18:18:11Z")
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
```auto
[{"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":"","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
---
### Author:  [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [26 September 2021 18:35 UTC](https://discourse.nodered.org/t/how-can-i-allineate-sliders/51238/10 "2021-09-26T18:35:37Z")
Fix the Hidden option on Panello Domotica tab.
---
### Author:  [@GiovanniG](https://discourse.nodered.org/u/GiovanniG)
#### Post date: [26 September 2021 18:54 UTC](https://discourse.nodered.org/t/how-can-i-allineate-sliders/51238/11 "2021-09-26T18:54:46Z")
I did it but nothing changed..
---
### Author:  [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [26 September 2021 20:38 UTC](https://discourse.nodered.org/t/how-can-i-allineate-sliders/51238/12 "2021-09-26T20:38:02Z")
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
---
### Author:  [@GiovanniG](https://discourse.nodered.org/u/GiovanniG)
#### Post date: [27 September 2021 08:13 UTC](https://discourse.nodered.org/t/how-can-i-allineate-sliders/51238/13 "2021-09-27T08:13:11Z")
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 :((
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [11 October 2021 08:14 UTC](https://discourse.nodered.org/t/how-can-i-allineate-sliders/51238/14 "2021-10-11T08:14:00Z")
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.