Reactive dropdown row item design

Hi,

How do I fixed the dropdown row item to look the same as shown in OutSystem UI page?

I didn't make any changes on the css.



https://outsystemsui.outsystems.com/OutsystemsUiWebsite/Productform?ProductId=0

This is how it look from OutSystems UI page.

Thanks in advanced.

Constance


Yes,

you can set all options you like with AdvancedFormat parameter.  

If you hover over it you can see in the description of this parameter that they even used disabling the search as an example.


Dorine

Hi Constance,

you try to inspect the code using Chrome to find out the CSS using in that particular widget:




Regards

Thank you Jose. 

What I did is  drag dropdown to the screen and  class "dropdown" is automatically applied and even the code generated is very different. 



Thanks.

Constance

Hello Constance Li,

Add the below css 

[data-dropdown] .dropdown-popup-row {
    height: auto;
    padding: 0px;
}

kindly refer the attached URL

Hope this helps!

Regards,

Ellakkiya.S

Thanks Ellakkiya but it doesn't work. 

I even tested on Forge component "Issue tracker". 

Regards,

Constance

Hi Constance,

you are confusing different widgets.  

What you have placed on your screen is a Dropdown, which is a classic simple html <select> element, and some of the look and feel is controlled by the user's browser, not you.

The widget you are comparing it with is the Outsystems UI pattern called 'Dropdown Search', which is based on choices javascript library, and is very customizable.

Dorine

Hi Dorine,

It there anyway to disabled search function from "search dropdown". From the link below it's just dropdown.

https://outsystemsui.outsystems.com/OutsystemsUiWebsite/Productform?ProductId=0

Thanks.

Constance


Yes,

you can set all options you like with AdvancedFormat parameter.  

If you hover over it you can see in the description of this parameter that they even used disabling the search as an example.


Dorine

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