Dashboard slider width

Dashboard
1

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

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

2

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:

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

Adjust the width value as you need.

image

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

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

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

4

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