Label length in slider

Dashboard
1

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
image704Ă—254 7.69 KB

One work around could be to leave the label blank and position text fields at the beginning.
Another to add   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
Several sliders700Ă—552 21.2 KB

2

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?

3

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):

<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?

4

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 {

5

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?

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

uitemplate
uitemplate712Ă—552 21.4 KB

1 Like
6

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.

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.

7

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
final706Ă—608 31.6 KB

ui template looks like:

<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>
1 Like
8

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