Change Dropdown color depending on value

2
Hey guys,   I am trying to set the background color of the dropdown element depending on the current value. For example I want “Offen” to be displayed with a red background and “in Arbeit” in yellow etc. Is there any way I can implement this into the style tab or anywhere else? Thanks.
asked
5 answers
6

Hi,

For testing I added a custom class ‘dropdown-stage’ to the dropdown. it’s possible to style the options by addressing them like this:

.dropdown-stage {
    option:nth-child(2) {
        background-color: red;
    }
    option:nth-child(3) {
        background-color: yellow;
    }
    option:nth-child(4) {
        background-color: green;
    }
}

 

More about styling in general here: https://docs.mendix.com/howto/front-end/customize-styling-new/

answered
5

Hi Furkan,

You can do that with “Dynamic Classes” in properties. I'm leaving a link here. Hopefully, it helps you. 

https://docs.mendix.com/refguide/common-widget-properties/#dynamicclasses

Kind regards,

Halil Kanat

answered
1

Hi Furkan,

 

you need to add the Lukas code in the dropdown css file. create 1 seperate sub class for that and add the code otherwise the entire dropdown has reflect this code.

answered
0

Furkan,

 

I don’t think it is possible via styling or appearance configuration. 

There are methods which consumes more time though; such as implementing a ‘OnClick’ nanoflow and then call a Javascript action which changes the background of this particular drop down.

 

 

thanks

answered
0

Hi all, is there any way to add the dynamic color or style based on selection from the page itself , for example, if I selected the color to green from the dropdown of values having color ex red, green, ...etc the background color should be set to green I can set color values in enum as required hex value or plan text but how to set dynamic style 

 

answered