Has anyone successfully used the CSS or </>Class field in the DBv2 Gauge node to '“hide” the min and max values from being displayed?
It certainly sounds like something that should be fairly straightforward.
What have you tried?
Add this to ui-template node
.nrdb-ui-gauge #limits {
display: none;
}
@gerrybartley … would it work if I added it to the Class field (just trying to avoid having to add a separate ui-template node)?
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?
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
[{"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"}}]
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.
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.
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
.hide-gauge-limits .other-selectors {
//CSS
}
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.
Then you did something wrong 
Ok… let me go back and re-verify everything
Did you update the CSS in the ui-template to what I provided:
1 Like
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. 
1 Like
