Space between label and level bar

[elegastje]

For the single horizontal bar, the Label is right above the bar/ticker values, which can seem crammed. In my case I am using widget unit sizes of 40 x 40 px and my ui-level is 8 x 2 units. The bar is right at the bottom as expected. The ticker values are right above the bar - also good. But the label is then placed right above the ticker values, which makes everything look crammed.

I found I could increase the distance between the label and the bar/ticker values by changing line 808 of ui-level.js, where config.textpos is hard coded to config.stripe.y0 - 2. By changing that to y0 - 20 I could make it all look a lot less crammed. It would be great if that option (distance between label and bar) could be set by the user in the ui-level edit panel.

BTW thanks for this great node with all its flexibility.

[hotNipi]

It is not so easy as just adjust the position to be a bit higher. Couple of problems I have met and remember from top of my head: For configured height 1, different fonts rendered with different platforms will be cut from top. (Firefox, if I remember correctly) The position can not be calculated cos font size is unpredictable As the text line can not be adjusted to be in center of free space but must depend on baseline (firefox does not support other ways) the font size drives all thing. And again - font size is unpredictable and can't be measured

To make it adjustable from configuration - again not so easy. It barely makes sense the vertical position as an arbitrary number for horizontal layout but for vertical it doesn't make any sense.

The thing I can do, is to add class to that text object and then you can adjust the position by overriding the CSS. Let's say the class will be here

Then you can add css like this

.ui-level-text{
    transform: translateY(-10px)
}

And if you need to adjust it differently along multiple instances [node-id="c5873db9851b81fb"] .ui-level-text{ transform: translateY(-10px) }

Can this be the solution for you?

[elegastje]

Thanks for the quick response and expansive explanation - I can certainly believe it. As they say, it all depends! Especially where fonts, font sizes etc are concerned. My quick and dirty solution worked in my case for both Firefox and Chrome as well as Android, but then I didn't fool around with fonts, etc too much.

Your offered solution would definitely work for me - I already override the CSS using many of your and other CSS styling options I have found on the NodeRed forum (see attached - still very much a work in progress), so adding a couple more lines of CSS would be trivial.

Thanks again.

[hotNipi]

Good. And done. Update available.