Cutomization of dropdown 'options Values' and 'onHover' style also.
Application Type
Reactive
Service Studio Version
11.13.0 (Build 53353)

Hi All,

I need to change background and font-color of dropdown options values and onHover also I need to make some changes but I'm not getting any class to do the same.


Solution

Hello Saransh, we were looking at the native version of the dropdown and not the costum.

To select the costume dropdown

Select the value that you want to show on the dropdown

And then you must drag the variable that will hold the value to the dropdown as the dropdown widget asks

I created a variable of type text in this case that will hold the value of the name

Then you will see the dropdown costume on your UI

Check the OML, it has already the styles that we discussed

With the option text-only you cannot customize because its the native dropdown.

dropdown.oml

Ohh Ok let me check this 

Thanks, Marcio this is the thing that I wanted.

Click on the hov and then the selector you want to see the styles


After that you will see for the element that you applied those settings the styles

For the color

.dropdown-container .dropdown-popup-row{}

For colour on hover

.dropdown-container .dropdown-popup-row:hover{}


For background color

.dropdown-container .dropdown-popup-row{}

For background color on hover

.dropdown-container .dropdown-popup-row:hover {}


For the select row background

.dropdown-container .dropdown-popup-row-selected{}

For the select row background on hover

.dropdown-container .dropdown-popup-row:hover, .dropdown-container .dropdown-popup-row-selected:hover {}

For selected row color

.dropdown-container .dropdown-popup-row-selected{}

For selected row color on hover

.dropdown-container .dropdown-popup-row:hover, .dropdown-container .dropdown-popup-row-selected:hover{}  


Kind Regards,

Márcio

I'm trying to apply these css but not able to do. Could you please tell me where I'm going wrong.I've attached my OML.

For the select row background on hover

For selected row color

For selected row color on hover

Experimentalapplication.oml

This is not classes. Is just a title, the classes that you should adapt is the ones not in bold

You should click on the theme and insert the styles

Check the OML

Experimentalapplication.oml

this I did because I tried to apply those classes directly but then it didn't work so that's why I did in this way.

But the point is if I apply directly in my CSS editor then still it is not working.

what should I do here?


Create a parent class to overwrite the dropdown classes or you can use !important but I don't recommend it.

Check the OML

Everytime you need to see those styles applied you need to put a dropdown inside a container and put the custom class.

Experimentalapplication.oml

hey Marcio I don't know why it is not working.

I read somewhere that we can not change option styles in dropdown in forum discussion only so is that's the case??

I think you are right. I tested on my side and didn't work, but I was doing the tests on the style guide. I will check with staff if is supposed to happen this because the style guide is different from the OutSystemsUI widgets version...

https://outsystemsui.outsystems.com/StyleGuidePreview/PatternDetail?MenuCategoryId=7&MenuSubCategorId=15

Kind Regards,

Márcio

Really Thanks for giving suggestions and helping.

Solution

Hello Saransh, we were looking at the native version of the dropdown and not the costum.

To select the costume dropdown

Select the value that you want to show on the dropdown

And then you must drag the variable that will hold the value to the dropdown as the dropdown widget asks

I created a variable of type text in this case that will hold the value of the name

Then you will see the dropdown costume on your UI

Check the OML, it has already the styles that we discussed

With the option text-only you cannot customize because its the native dropdown.

dropdown.oml

Ohh Ok let me check this 

Thanks, Marcio this is the thing that I wanted.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.