Request: Add a option on UI nodes to add a CSS class

Core Development
1

Several times I've had a case where I wanted to change the color of just one ui-text node. For example,
I am monitoring a temperatures which is display in text node 'A'. I also have text node 'B' under text node 'A' which is normally empty.

If the temperature exceeds the set value, I move the word 'ALERT' to text node 'B' and it shows up. When the valud drops back to normal levels, Ithe flow moves spaces to text node 'B' and the word 'ALERT' is removed.

What I want to do is add some CSS to change the color of text node 'B' to display red. The problem is if I use '.nr-dashboard-theme .nr-dashboard-text p' it changes the text for both naod 'B' and node 'A'.

What would be useful is if each ui node hade another entry that would allow the user to add a CSS class. This way they could have CSS address ui's as groups or uniquely.

2

Did you spot this thread a day or so ago ?

1 Like
3

But what if you don't use the label because you don't want it to show?

4

edge cases can use a template :slight_smile:

5

or there could be a switch not to show the label :face_with_raised_eyebrow:

6

Actually it would still have a class of nr-dashboard-widget-
as that is prepended to the label...
(and no - I don't want to add a switch)

7

I suppose I can use CSS to hide the label :stuck_out_tongue_winking_eye:

Actually having something that will allow targeting of individual widgets will be a great improvement

Thanks for all you do!

8

I wonder if this feature is already implemented for the ui_text node.

The help text says so:

The widget also has a class of nr-dashboard-widget-{the_widget_label_with_underscores} which can be used for additional styling if required. You may need to use the !important flag to override the theme.

But adding the node to a dashboard I can´t find the CSS class when doing a search in the browser dev tools.

I am running Dashboard 2.21.0 on a windows machine.

9

It should do - here is one for a text box with a label "Simple"

<md-card ui-card-size="3x1" layout="row" layout-align="space-between center" class="nr-dashboard-text ng-scope _md layout-row layout-align-space-between-center nr-dashboard-widget-Simple visible" ng-class="[ me.item.safeLabel, {'nr-dashboard-disabled':me.item.disabled}]" style="left: 162px; top: 270px; width: 156px; height: 48px;">

10

Thanks for the feedback Dave ! I will have a (careful) look as soon as I get a chance.

11

I have a ui-text widget box with a label of node17: here is what the class shows:

class="nr-dashboard-text ng-scope _md layout-row layout-align-start-center nr-dashboard-widget-node17__ visible"

Looks like the two underline characters replace the colin(:) and space that follows it but atleast it is addressable!!

12

Classes can’t contain special characters or spaces so we convert them to underscores

1 Like
13

I confirm it is all good for me. I just cleared the browser cache to make it work.