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.
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.
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
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
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.
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
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.
Everytime you need to see those styles applied you need to put a dropdown inside a container and put the custom class.
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
Really Thanks for giving suggestions and helping.