# Label length in slider

**URL:** <https://discourse.nodered.org/t/label-length-in-slider/36125>\
**Category:** Dashboard\
**Created:** [18 November 2020 10:02 UTC](https://discourse.nodered.org/t/label-length-in-slider/36125 "2020-11-18T10:02:43Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![hklages](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hklages/32/23899_2.png) [@hklages](https://discourse.nodered.org/u/hklages)\
**Post date:** [18 November 2020 10:02 UTC](https://discourse.nodered.org/t/label-length-in-slider/36125/1 "2020-11-18T10:02:44Z")

</div>

I use several sliders to adjust room temperatures.  
The room names are used as labels. Unfortunately the names are of different length.

Is there any possibility to define the length of a label (% relative to total lenght)?

As default it looks like this:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/7/87a8a23210f0c4ecdc9eeafb16b5344e152b2927.png)

One work around could be to leave the label blank and position text fields at the beginning.  
Another to add `&nbsp;` at the end of some label looks better but not perfect (see Schlafen).

Both methods are cumbersome - a label length would be perfect.

 ![Several sliders](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/e/5e155577f48ad8385bb73ae8a03f0dd0c1949407.png)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [18 November 2020 10:09 UTC](https://discourse.nodered.org/t/label-length-in-slider/36125/2 "2020-11-18T10:09:58Z")

</div>

You should be able to align the labels with a bit of css in a ui\_template set to HEAD mode.

Are you familiar with Devtools & CSS to be able to determine the right CSS selector etc?

---

<div class="post-metadata">

**Author:** ![hklages](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hklages/32/23899_2.png) [@hklages](https://discourse.nodered.org/u/hklages)\
**Post date:** [18 November 2020 12:31 UTC](https://discourse.nodered.org/t/label-length-in-slider/36125/3 "2020-11-18T12:31:09Z")

</div>

The selector for the second slider is

`#HzZeitbegrenzt_Temperaturen_anpassen_cards > md-card:nth-child(2) > p:nth-child(1)`

The label is in a paragraph tag `<p>` and if I change it (edit html tag in Edge) to `<p style="width:30%">` the result is fine.

I tried in in template node (added to side head):

```auto
<style>
 #HzZeitbegrenzt_Temperaturen_anpassen_cards > md-card:nth-child(2) > p:nth-child(1) > {
    "width:50%"
}
</style>

```

But that does not work. What is wrong?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [18 November 2020 12:34 UTC](https://discourse.nodered.org/t/label-length-in-slider/36125/4 "2020-11-18T12:34:24Z")

</div>

Have you deployed & refreshed?

re-inspect the dashboard to see if the CSS has made its way into the HTML.

Also, remove the last `>` before the `{`

---

<div class="post-metadata">

**Author:** ![hklages](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hklages/32/23899_2.png) [@hklages](https://discourse.nodered.org/u/hklages)\
**Post date:** [18 November 2020 16:25 UTC](https://discourse.nodered.org/t/label-length-in-slider/36125/5 "2020-11-18T16:25:34Z")

</div>

Thanks for your help!  
I removed the \> but width does not work. I use now "min-width" and removed the "child.." to get it for all children. That works fine now.

One more question: I use widget in group to limit scope to that group. Are there any disadvantages compared to adding it to the side head?

```auto
<style>
 #HzZeitbegrenzt_Temperaturen_anpassen_cards > md-card > p.label.ng-binding {
    min-width: 18%;
}
</style>

```

 ![uitemplate](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/4/14972bb92d4e1bbd3870e2e2849bc1ec96950880.png)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [18 November 2020 17:00 UTC](https://discourse.nodered.org/t/label-length-in-slider/36125/6 "2020-11-18T17:00:33Z")

</div>

> [@hklages](#):
>
> I removed the \> but width does not work

That might have been due to specificity (i.e. had you added `!important` to the css entry, it may have worked). Having the extra `>` was the real issue.

> [@hklages](#):
>
> One more question: I use widget in group to limit scope to that group. Are there any disadvantages compared to adding it to the side head?

It doesnt matter where the CSS is - the selector performs the "scoping" e.g. having ` #HzZeitbegrenzt_Temperaturen_anpassen_cards >` in the selector limits the affect to children of ` #HzZeitbegrenzt_Temperaturen_anpassen_cards` - so all you are doing is effectively placing the CSS somewhere other than head.

---

<div class="post-metadata">

**Author:** ![hklages](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hklages/32/23899_2.png) [@hklages](https://discourse.nodered.org/u/hklages)\
**Post date:** [18 November 2020 19:24 UTC](https://discourse.nodered.org/t/label-length-in-slider/36125/7 "2020-11-18T19:24:46Z")

</div>

You are right. I tried the width again and it works (even without important)

I guess I got confused with the apostrophe or colons - trying to much different things.

Thanks a lot for your help. I modified now also the ballons - they are not anymore overlapping with the upper slider or marker (marker removed) (update 2020-11-19)

 ![final](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/f/4f4a220388c1e636fafed7184c4a08475746f0e9.png)

ui template looks like:

```auto
<style>
 #HzZeitbegrenzt_Temperaturen_anpassen_cards > md-card > p.label.ng-binding {
    min-width: 18%;
 }
 #HzZeitbegrenzt_Temperaturen_anpassen_cards > md-card > md-slider > div > div > div.md-thumb-container > div.md-sign > span {
    color: white;
    transform: translate3d(0, 0, 0) scale(0.9);
 }
 #HzZeitbegrenzt_Temperaturen_anpassen_cards > md-card > md-slider > div > div > div.md-thumb-container > div.md-sign {
    width: 28px;
    height: 28px;
    top: -12px;
 }
 #HzZeitbegrenzt_Temperaturen_anpassen_cards > md-card > md-slider > div > div > div.md-thumb-container > div.md-thumb:after {
    width: 0px;
    height: 0px;
    border-radius: 0px;
    border-width: 0px;
 }
 
 #HzZeitbegrenzt_Temperaturen_anpassen_cards > md-card > md-slider > div > div > div.md-thumb-container > div.md-focus-ring {
    width: 0px;
    height: 0px;
 }
</style>

```

---

<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:** [2 December 2020 19:24 UTC](https://discourse.nodered.org/t/label-length-in-slider/36125/8 "2020-12-02T19:24:51Z")

</div>

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