Reasonable 
1 Like
So, getting the height of a gauge right is hard.
What would you expect the gauge to look like in the following conditions, with three key criteria to consider:
- Gauge Sizing
- Font Size
- Gauge vertical/horizontal alignment
User has defined a 1 x 1 size for the gauge.
Clearly too small to fit a gauge inside this space, do we just render it anyway (which I've done in the examples above, where complaints have been made), or make it easier for the user and override their specified width/height?
User has defined a 6 x 1 size for the gauge.
Plenty of width to play here, but not enough height, do we override the height? (we currently do this, I'm thinking that I need to not do this anymore)
User has defined a 3 x 8 size for the gauge
Where do we vertically align the gauge? At the bottom of their widget space, the center, or the top?
User has defined a 4 x 4 size for the gauge, but expanded their screen to a very wide monitor
In this case, with a "Grid" layout, the width and height are not in a 1:1 aspect ratio, so we'd need to left or centrally align the gauge horizontally.
I'd go with aspect-ratio :1 and size based on width so you render always same way. It should fit and look nice with 2x2 with label size 1rem.
I'd make grid container with 2 rows : 1em 1fr
No min-height. It is not manageable.
Then all the value fields go to the bottom row also with absolute positioning
As the layout of the gauge graphics is not that square for half variant, that may require a bit different adjustments.
but with grid layouts, enforcing a 1:1 aspect ratio then means our row height changes as the screen width changes - which we don't want
My thinking (and what I'm playing with locally) is the idea that the default size for a gauge is 3x3 or something like that, and whatever size gets set is what I listen to, no trying to be smart, etc.
1rem for all gauge sizes? I'm thinking I need to go font size as a f(gauge size) to some extent
It does but ti is logical outcome. The space is filled with graphics always in same manner. Otherwise if the card grows in width you have gaps in between which grow.
Well it goes now int the "Art" category slightly.... I'm not good with art ..
Yep, but then you end up with rows defined as height 1 that are different height in our layouts... I don't think that should be the case.
1rem for label font size in case of 2x2 seems natural.
seems small imo
1.5rem does work better though
That is built into the current CSS. There's no limit for row height and there's no rule for rows to bhave same height.
User can select space for widget to be on one row or multiple rows but never specify row height.
If you put elements with different heights in one row, the row height is whatever is required by tallest element. This happens also if you make the button with text wrapping. Whenever it goes to 3 lines the height of button also grows. And with that the card grows. That's is very expected in my opinion. Fixed height is something which does not fit into the layout strategy anyhow. Except if for dedicated screens and stuff like that.
1 Like
There should be some kind of standard to have it same or at least similar for all core widgets
1 Like
