# Dashboard slider width

**URL:** <https://discourse.nodered.org/t/dashboard-slider-width/40473>\
**Category:** Dashboard\
**Created:** [6 February 2021 01:53 UTC](https://discourse.nodered.org/t/dashboard-slider-width/40473 "2021-02-06T01:53:10Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![tmichaeltx](https://avatars.discourse-cdn.com/v4/letter/t/73ab20/32.png) [@tmichaeltx](https://discourse.nodered.org/u/tmichaeltx)\
**Post date:** [6 February 2021 01:53 UTC](https://discourse.nodered.org/t/dashboard-slider-width/40473/1 "2021-02-06T01:53:11Z")

</div>

I am building some Smarthome items in Dashboard (though I expect I will in the end shift to more customization via UIbuilder). In the meantime here is the aesthetic issue I am wondering if there is a solution for:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/3/03d23b6049ce88d437b05f1d4605d2f29d1dce06.png)

Each of these slider controls has the same width in the dashboard. Because the label text is of differing lengths, the slide portion is of different lengths. Is there a way for these 5 items to have the slide be the same length (i.e. the markers would align vertically when set to the same value)?

---

<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:** [6 February 2021 07:08 UTC](https://discourse.nodered.org/t/dashboard-slider-width/40473/2 "2021-02-06T07:08:17Z")

</div>

You can override dashboard CSS. If you don't know how to do it, search a bit here in forum with keywords "dashboard css"

To make slider labels having same width:

```auto
.nr-dashboard-slider p.label {
    margin-right: 0px; 
    white-space: nowrap;
    width: 110px;
}

```

Adjust the width value as you need.

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

If you 'll need to adjust label width for many groups and the width value may be different

```auto
#Tabname_groupname_cards > .nr-dashboard-slider p.label{
    margin-right:0px;
    white-space: nowrap;
    width: 75px; 
}

```

---

<div class="post-metadata">

**Author:** ![tmichaeltx](https://avatars.discourse-cdn.com/v4/letter/t/73ab20/32.png) [@tmichaeltx](https://discourse.nodered.org/u/tmichaeltx)\
**Post date:** [10 February 2021 02:29 UTC](https://discourse.nodered.org/t/dashboard-slider-width/40473/3 "2021-02-10T02:29:32Z")

</div>

This worked well and was easy to implement until I tried to follow the part about different sizes for different tabs.

How would I do 110px for tab 0 and 75px for tab 1?

Nevermind. I found it easy to do by selecting Widget in group from this menu on the template node:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/f/4f364a307bd25a6d2bcc77ef107a098f226cf224.png)

---

<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:** [24 February 2021 02:30 UTC](https://discourse.nodered.org/t/dashboard-slider-width/40473/4 "2021-02-24T02:30:15Z")

</div>

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