Hello everyone,

I am struggling with the dropdown tags widget, as I show in the image below, where whenever I open the options menu its background is transparent and it is difficult to understand the options and it is not aesthetically what I wanted. 

This widget's css is blocked and I don't know how to change it. I've tried searching the system's default css list but I haven't found anything. Is there any way around it?

My best regards,

João Oliveira

Solution

Hi João,


You really should work your CSS in order to get the result that you are looking for.


I did a small test in my personal environment [ https://joao-delgado.outsystemscloud.com/e/Dashboard?_ts=637261977799409163 ]. I Just changed the background color and this is what I can share with you:


Write CSS to be applied only to your Page (DashBoard in my case) or to all of your app (e). This will overwrite the Widget CSS, you just need to use the right selectors.



Use a couple of selectors that you can find by inspecting element in your browser and customize the widget style as your wish. For my example I only used:

SyntaxEditor Code Snippet

.choices__list--dropdown {
    background-color: yellow;}

However, you can work with other selectors in order to style your hover behaviour, selection behaviour, etc.

Best Regards,


João Delgado

Solution

Hi João,


Thank you very much for the solution and the explanation, it's working as intended.


My Best Regards,

João Oliveira