# UI Gauge is Available

**URL:** <https://discourse.nodered.org/t/ui-gauge-is-available/85318>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [8 February 2024 11:51 UTC](https://discourse.nodered.org/t/ui-gauge-is-available/85318 "2024-02-08T11:51:07Z")\
**Posts on this page:** 14\
**Page:** 2

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [11 February 2024 08:24 UTC](https://discourse.nodered.org/t/ui-gauge-is-available/85318/21 "2024-02-11T08:24:01Z")

</div>

Reasonable 🙂

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [23 February 2024 15:09 UTC](https://discourse.nodered.org/t/ui-gauge-is-available/85318/22 "2024-02-23T15:09:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [23 February 2024 15:28 UTC](https://discourse.nodered.org/t/ui-gauge-is-available/85318/23 "2024-02-23T15:28:38Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [23 February 2024 15:40 UTC](https://discourse.nodered.org/t/ui-gauge-is-available/85318/24 "2024-02-23T15:40:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [23 February 2024 15:41 UTC](https://discourse.nodered.org/t/ui-gauge-is-available/85318/25 "2024-02-23T15:41:47Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [23 February 2024 15:46 UTC](https://discourse.nodered.org/t/ui-gauge-is-available/85318/26 "2024-02-23T15:46:03Z")

</div>

> [@hotNipi](#):
>
> It should fit and look nice with 2x2 with label size 1rem.

`1rem` for all gauge sizes? I'm thinking I need to go font size as a `f(gauge size)` to some extent

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [23 February 2024 15:48 UTC](https://discourse.nodered.org/t/ui-gauge-is-available/85318/27 "2024-02-23T15:48:49Z")

</div>

> [@joepavitt](#):
>
> row height changes

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 ..

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [23 February 2024 15:49 UTC](https://discourse.nodered.org/t/ui-gauge-is-available/85318/28 "2024-02-23T15:49:45Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [23 February 2024 15:50 UTC](https://discourse.nodered.org/t/ui-gauge-is-available/85318/29 "2024-02-23T15:50:06Z")

</div>

1rem for label font size in case of 2x2 seems natural.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [23 February 2024 15:50 UTC](https://discourse.nodered.org/t/ui-gauge-is-available/85318/30 "2024-02-23T15:50:51Z")

</div>

![Screenshot 2024-02-23 at 15.50.36](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/e/ae12b1e9aa11222d81f9e7634693e6c33d4cd943.png)

seems small imo

1.5rem does work better though

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [23 February 2024 15:53 UTC](https://discourse.nodered.org/t/ui-gauge-is-available/85318/31 "2024-02-23T15:53:19Z")

</div>

> [@joepavitt](#):
>
> rows defined as height `1` that are different height in our layouts

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.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [23 February 2024 15:55 UTC](https://discourse.nodered.org/t/ui-gauge-is-available/85318/32 "2024-02-23T15:55:26Z")

</div>

> [@joepavitt](#):
>
> 1.5rem does work better though

There should be some kind of standard to have it same or at least similar for all core widgets

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [23 July 2025 09:50 UTC](https://discourse.nodered.org/t/ui-gauge-is-available/85318/33 "2025-07-23T09:50:16Z")

</div>

Split this topic on 23 July 2025 09:50 UTC

2 posts were split to a new topic: [Ui Gauge widget animation](https://discourse.nodered.org/t/ui-gauge-widget-animation/98264)

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [23 July 2025 09:50 UTC](https://discourse.nodered.org/t/ui-gauge-is-available/85318/34 "2025-07-23T09:50:51Z")

</div>

Closed on 23 July 2025 09:50 UTC



[Previous page](https://discourse.nodered.org/t/ui-gauge-is-available/85318.md?page=1)