cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - If community subscription notifications are filling up your inbox you can set up a daily digest and get all your notifications in a single email. X

Help with Value Display widget

TLAW
6-Contributor

Help with Value Display widget

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!

1 ACCEPTED SOLUTION

Accepted Solutions
nmilleson
17-Peridot
(To:TLAW)

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

View solution in original post

2 REPLIES 2
nmilleson
17-Peridot
(To:TLAW)

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

TLAW
6-Contributor
(To:nmilleson)

That worked perfectly... thanks so much!

Top Tags