# CSS question about DBv2 Gauge

**URL:** <https://discourse.nodered.org/t/css-question-about-dbv2-gauge/98710>\
**Category:** Dashboard\
**Created:** [18 August 2025 01:42 UTC](https://discourse.nodered.org/t/css-question-about-dbv2-gauge/98710 "2025-08-18T01:42:50Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![k5map](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/k5map/32/47681_2.png) [@k5map](https://discourse.nodered.org/u/k5map)\
**Post date:** [18 August 2025 01:42 UTC](https://discourse.nodered.org/t/css-question-about-dbv2-gauge/98710/1 "2025-08-18T01:42:50Z")

</div>

Has anyone successfully used the CSS or \</\>Class field in the DBv2 Gauge node to '“hide” the min and max values from being displayed?

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [18 August 2025 02:16 UTC](https://discourse.nodered.org/t/css-question-about-dbv2-gauge/98710/2 "2025-08-18T02:16:38Z")

</div>

It certainly sounds like something that should be fairly straightforward.

What have you tried?

---

<div class="post-metadata">

**Author:** ![gerrybartley](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gerrybartley/32/67495_2.png) [@gerrybartley](https://discourse.nodered.org/u/gerrybartley)\
**Post date:** [18 August 2025 06:30 UTC](https://discourse.nodered.org/t/css-question-about-dbv2-gauge/98710/3 "2025-08-18T06:30:50Z")

</div>

Add this to ui-template node

```auto
.nrdb-ui-gauge #limits {

display: none;

}

```

---

<div class="post-metadata">

**Author:** ![k5map](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/k5map/32/47681_2.png) [@k5map](https://discourse.nodered.org/u/k5map)\
**Post date:** [18 August 2025 06:56 UTC](https://discourse.nodered.org/t/css-question-about-dbv2-gauge/98710/4 "2025-08-18T06:56:22Z")

</div>

@gerrybartley … would it work if I added it to the Class field (just trying to avoid having to add a separate ui-template node)?

---

<div class="post-metadata">

**Author:** ![k5map](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/k5map/32/47681_2.png) [@k5map](https://discourse.nodered.org/u/k5map)\
**Post date:** [18 August 2025 07:00 UTC](https://discourse.nodered.org/t/css-question-about-dbv2-gauge/98710/5 "2025-08-18T07:00:53Z")

</div>

I added it both the Class field as well as a ui-template before the gauge without success… the contents of the ui-template replaced the gauge text/value. Did I miss something?

---

<div class="post-metadata">

**Author:** ![gerrybartley](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gerrybartley/32/67495_2.png) [@gerrybartley](https://discourse.nodered.org/u/gerrybartley)\
**Post date:** [18 August 2025 07:13 UTC](https://discourse.nodered.org/t/css-question-about-dbv2-gauge/98710/6 "2025-08-18T07:13:58Z")

</div>

I think class field expects a class name defined in a template, but I may be wrong

Post the flow you have

This is a sample flow using the template

```auto
[{"id":"7796c491d69ef702","type":"inject","z":"ed1c89e46fccdcc5","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"50","payloadType":"num","x":150,"y":580,"wires":[["e4d2696df83f0cad"]]},{"id":"e4d2696df83f0cad","type":"ui-gauge","z":"ed1c89e46fccdcc5","name":"Gauge","group":"34cbf862056c0304","order":0,"value":"payload","valueType":"msg","width":3,"height":3,"gtype":"gauge-34","gstyle":"rounded","title":"gauge","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#5cd65c"},{"from":"4","color":"#ffc800"},{"from":"7","color":"#ea5353"}],"min":0,"max":"100","sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":450,"y":580,"wires":[]},{"id":"be61d7d5678b3a1f","type":"ui-template","z":"ed1c89e46fccdcc5","group":"","page":"","ui":"4740393b964cb7af","name":"Site","order":0,"width":0,"height":0,"head":"","format":"\n\n\n\n \n .nrdb-ui-gauge #limits {\n display: none;\n }\n ","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"site:style","className":"","x":650,"y":580,"wires":[[]]},{"id":"34cbf862056c0304","type":"ui-group","name":"Gauge","page":"8ed2e7df38870ae1","width":6,"height":1,"order":-1,"showTitle":false,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"4740393b964cb7af","type":"ui-base","name":"Playground","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control","ui-dropdown","ui-chart","ui-gauge","ui-button","ui-template","ui-text","ui-table","ui-form","ui-switch"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"fixed","titleBarStyle":"hidden","showReconnectNotification":true,"notificationDisplayTime":"1","showDisconnectNotification":true,"allowInstall":true},{"id":"8ed2e7df38870ae1","type":"ui-page","name":"Gauge","ui":"4740393b964cb7af","path":"/gauge","icon":"home","layout":"grid","theme":"64b4a18ccad8aaa2","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":-1,"className":"","visible":"true","disabled":"false"},{"id":"64b4a18ccad8aaa2","type":"ui-theme","name":"Dark","colors":{"surface":"#424242","primary":"#0094ce","bgPage":"#424242","groupBg":"#424242","groupOutline":"#424242"},"sizes":{"density":"default","pagePadding":"2px","groupGap":"6px","groupBorderRadius":"4px","widgetGap":"10px"}}]

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [18 August 2025 07:17 UTC](https://discourse.nodered.org/t/css-question-about-dbv2-gauge/98710/7 "2025-08-18T07:17:05Z")

</div>

The `class` field is only for applying 1 or more class names to the parent element providing you with a means to style any part of the widget or it's children via CSS. The primary way you add CSS is via a ui-template node set for CSS.

---

<div class="post-metadata">

**Author:** ![k5map](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/k5map/32/47681_2.png) [@k5map](https://discourse.nodered.org/u/k5map)\
**Post date:** [18 August 2025 07:18 UTC](https://discourse.nodered.org/t/css-question-about-dbv2-gauge/98710/8 "2025-08-18T07:18:45Z")

</div>

Ok… that did remove it from not only that gauge but all of the others on the same page 🙂

My apologizes for not stating I only want to remove the min/max from one gauge.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [18 August 2025 07:22 UTC](https://discourse.nodered.org/t/css-question-about-dbv2-gauge/98710/9 "2025-08-18T07:22:12Z")

</div>

You can scope the reach of the CSS by inventing your own class name (e.g. `hide-gauge-limits`) and adding that to the CSS selector

```css
.hide-gauge-limits .other-selectors {
   //CSS 
}

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [18 August 2025 07:30 UTC](https://discourse.nodered.org/t/css-question-about-dbv2-gauge/98710/11 "2025-08-18T07:30:42Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/9/599050f01ea9f6522c60bb6f0837df552fa3ce19.png)

```css
.no-gauge-limits.nrdb-ui-gauge svg > g#limits {
    display: none;
}

```

Gauge settings:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/f/8f34bef68c1f340860fa8de9675b3b1ed3789522.png)

---

<div class="post-metadata">

**Author:** ![k5map](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/k5map/32/47681_2.png) [@k5map](https://discourse.nodered.org/u/k5map)\
**Post date:** [18 August 2025 07:40 UTC](https://discourse.nodered.org/t/css-question-about-dbv2-gauge/98710/12 "2025-08-18T07:40:00Z")

</div>

Ok one step forward, one step back 🙂

Adding “no-gauge-limit” did remove min/max but for all gauges (lol). I’m ok with this for now but you’d expect entering this in a single node would not affect all of the same type of nodes on all of the pages.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [18 August 2025 07:41 UTC](https://discourse.nodered.org/t/css-question-about-dbv2-gauge/98710/13 "2025-08-18T07:41:37Z")

</div>

> [@k5map](#):
>
> Adding “no-gauge-limit” did remove min/max but for all gauges

Then you did something wrong 🤷

> [@Steve-Mcl](#):
>
> ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/9/599050f01ea9f6522c60bb6f0837df552fa3ce19.png)
> 
> image492×179 2.34 KB

---

<div class="post-metadata">

**Author:** ![k5map](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/k5map/32/47681_2.png) [@k5map](https://discourse.nodered.org/u/k5map)\
**Post date:** [18 August 2025 07:42 UTC](https://discourse.nodered.org/t/css-question-about-dbv2-gauge/98710/14 "2025-08-18T07:42:35Z")

</div>

Ok… let me go back and re-verify everything

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [18 August 2025 07:43 UTC](https://discourse.nodered.org/t/css-question-about-dbv2-gauge/98710/15 "2025-08-18T07:43:23Z")

</div>

Did you update the CSS in the ui-template to what I provided:

> [@Steve-Mcl](#):
>
> ```auto
> .no-gauge-limits.nrdb-ui-gauge svg > g#limits {
> display: none;
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![k5map](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/k5map/32/47681_2.png) [@k5map](https://discourse.nodered.org/u/k5map)\
**Post date:** [18 August 2025 07:52 UTC](https://discourse.nodered.org/t/css-question-about-dbv2-gauge/98710/16 "2025-08-18T07:52:37Z")

</div>

Ding Ding Ding… when I updated the ui-template with the revised code, assigned the ui-template to the page with the gauge. It removed min/max from just the gauges I added “no-gauge-limits”.

Can’t thank you enough for your assistance. 👍