Skip to main content
1-Visitor
October 21, 2021
Solved

Help with Value Display widget

  • October 21, 2021
  • 1 reply
  • 1943 views

Hi all,

I am wondering if there is a way to enlarge the area of a Value Display widget that changes color based on State Definition.  If you look at the attachment I have uploaded, the center box outlined in Red is a container with a Value Display widget.  I have the name of a piece of equipment being displayed, and if it is Running the bottom will show green, and if it is Offline it will show red.  My question is this; the green box in the screenshot is showing that the equipment is Running.  Is there a way to make that green box bigger?  Ideally I'd like the whole container to have a green background if running, and a red background if offline.  Is this possible?

Thanks in advance!

Best answer by nmilleson

You can dynamically assign a class to your container and use CSS to make the entire container background green or red.   For example, if it should be green, then return a class called greenContainer to your container (or redContainer if it should be red).  Then your CSS will look like:


.greenContainer .widget-content {
 background: green;
}

.redContainer .widget-content {
 background: red;
}

 

 

Hope that helps

--Nick

1 reply

nmilleson17-PeridotAnswer
17-Peridot
October 22, 2021

You can dynamically assign a class to your container and use CSS to make the entire container background green or red.   For example, if it should be green, then return a class called greenContainer to your container (or redContainer if it should be red).  Then your CSS will look like:


.greenContainer .widget-content {
 background: green;
}

.redContainer .widget-content {
 background: red;
}

 

 

Hope that helps

--Nick

TLAW1-VisitorAuthor
1-Visitor
October 26, 2021

That worked perfectly... thanks so much!