Resize to preserve name over slider size

[decairn]

The size of the slider when on the same line as the light name is static (see. toggle = true option). This causes a readability issue on longer names (e.g. Master Bedroom Lamp 1) that end up being truncated. Can that be more flexible to prefer full print of name over slider size, with a reasonable minimum slider length observed?

[thomasloven]

I think the current default size is a reasonable minimum length (Also, it's the same behavior as for a default input_number entity). You could try using the full_row option to put the slider on a single row by its own.

[hulkhaugen]

I want to 2nd this, as the title becomes very short on mobile. Could we have the option to hide the toggle, and push the slider further to the right? I really like the idea of a dimmer slider and the toggle is not interesting in most cases. It's not very useful when the names are truncated this much imo.

[thomasloven]

An option to hide the toggle that's not visible by default? Sure! Here you go! 😜

[hulkhaugen]

Yes, but the space of the toggle is replaced by a number. I would like to have that <div> hidden, so the slider moves all the way to the right, and there is more room for the entity name. See downlights example below:

[hulkhaugen]

If it's possible to get it like the "downlights" example above, and ideally with the percent value as secondary info, I would be super happy. If you're not interested in adding that feature to your card, I would appreciate if you could point me in the right direction to modify it myself. I spent a full evening trying to modify it, but I honestly don't know exactly what i'm doing and did not achieve any success.

[thomasloven]

I'll see what I can do.

[hulkhaugen]

The size of the slider when on the same line as the light name is static (see. toggle = true option). This causes a readability issue on longer names (e.g. Master Bedroom Lamp 1) that end up being truncated. Can that be more flexible to prefer full print of name over slider size, with a reasonable minimum slider length observed?

If you're still interested, you can hack reduce the max length of the slider by adding the following line in the .js file between the <style>-tags under const style = Polymer.html: ha-slider {width: 160px;}. The default value is 200px. If you also want to hide the toggle, you can remove or comment out the <template is="dom-if" if="{{displayToggle}}"> part under const input = Polymer.html. This will only hide it if you use the option toggle: true. If you want this for the default option, you can delete/comment out <template is="dom-if" if="{{displayValue}}"> instead. Just remember to clear your cache for the changes to apply.

I'm still working on how to apply the #sliderContainer {margin-right:0;} to make the slider align fully to the right side if the toggle is hidden, but haven't figured it out yet. Hopefully thomasloven can make this an included feature in the future.

[Knol010]

How can i hide the slider when the light is off, and show it when i toggle it on? Thanks for the help.

[thomasloven]

hide_when_off: true