12
Views
4
Comments
Solved
Color specific options in a Dropdown - Mobile

Hello everyone

I have an Outsystems 11 Mobile application with a dropdown.

I would like to colour each specific list item in the dropdown a different colour depending on the value of that item.

Very similar to this post https://www.outsystems.com/forums/discussion/53654/specific-color-for-only-particular-items-in-the-list-dropdown/ 

but for mobile instead of Traditional web, and using a standard dropdown.

Does anyone have any suggestions?

Thanks!

Rank: #136
Solution

Hi Mitchel,

It is reasonably easy to do, if you change your dropdown 'options content' from text to custom. 

In that case, you can have a container around the text of each option, and you could give the container a style class that depends on your data.  In my example, i use the status of the request as the base for the color.


In css, just define how each of these classes should be displayed.  The dropdown-popup-row takes care of the values in the list, the .dropdown-display-content takes care of the selected value.

See attached oml,

Dorine

DemoColourfulOptionsMobile.oml

Rank: #361

Hi, friend! 

Will be very interesting figure it out how to do that inside a dropdown. The first step is to fill the dropdown list with a structures with the data plus the color to background. 

The select has a lot of properties applied to it. Try to pass the value to background-color at the extended properties.

That can be a good start

Rank: #136
Solution

Hi Mitchel,

It is reasonably easy to do, if you change your dropdown 'options content' from text to custom. 

In that case, you can have a container around the text of each option, and you could give the container a style class that depends on your data.  In my example, i use the status of the request as the base for the color.


In css, just define how each of these classes should be displayed.  The dropdown-popup-row takes care of the values in the list, the .dropdown-display-content takes care of the selected value.

See attached oml,

Dorine

DemoColourfulOptionsMobile.oml