Dashboard slider width

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

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

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

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