CSS set Background

Hi all, I have a simple problem. I need to set the background of a groupBox to a specific color. Since it is just on a particular view, I would like to use the "style" input in the modeler (not creating a custom CSS class). You can find my solution below. However, this solution does not change the background of the groupbox... any suggestions why?
3 answers

I know you don't want to apply a custom css style but it appears that their is a background-color set in the lib.css on the .mx-groupbox-body class. That's the reason why the style attribute for the groupbox is overridden.

When you apply this to your _custom-styling.scss it should work:

.mx-name-groupBox1 .mx-groupbox-body {
	background-color: #00ff00;

*Please make sure to work with Sass otherwise the style could be overwritten.

As Dennis Kho already mentioned the groupbox consists several elements, the header and the body div.


Probably asking the obvious; but did you clear your browser cache?


I don't think this is going to work, and you will still need to make use of a class. Reason being that you need to target a div at a different level.

If I recall correctly, the groupbox consists of several elements, such as a header div and body div that are wrapped by a more general 'groupbox' div. Applying your styling in the style section of your modeler would mean that the background color would be applied to the top-level div, which would be the 'groupbox' div, while in fact you need to target the body div (thats sits on top of the wrapper). 

You can easily check this by inspecting your groupbox elements from within your browser (F12 in Chrome)