Skip to Content (Press Enter)
2017-04-20 10-11-42
Mitch JT
223Views
4Comments
Solved
Color specific options in a Dropdown - Mobile
Question
Mobile
OutSystems UI Patterns

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!

0
0
17 Jul 2020
Copy Link
2021-09-06 15-09-53
Dorine Boudry
 
MVP
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

See solution in context
DemoColourfulOptionsMobile.oml
1
0
17 Jul 2020
Copy Link
2017-04-20 10-11-42
Mitch JT

Dorine Boudry wrote:

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

 

 Hello Dorine


Thank you very much! This worked exactly as needed.

I can't believe I didn't think of it myself. This is such a simple solution!

Thanks again and have a great day!

0
0
21 Jul 2020
Copy Link
2026-02-05 15-36-36
Lenon Manhães Villeth
Champion

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

0
0
17 Jul 2020
Copy Link
2017-04-20 10-11-42
Mitch JT

Lenon Manhães wrote:

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

 Hi Lenon!

Thanks for your response. Unfortunately I was looking for a way to do this in Mobile app, but I appreciate the help either way!

 

0
0
21 Jul 2020
Copy Link
2021-09-06 15-09-53
Dorine Boudry
 
MVP
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
1
0
17 Jul 2020
Copy Link
2017-04-20 10-11-42
Mitch JT

Dorine Boudry wrote:

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

 

 Hello Dorine


Thank you very much! This worked exactly as needed.

I can't believe I didn't think of it myself. This is such a simple solution!

Thanks again and have a great day!

0
0
21 Jul 2020
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.