Hi All,
I was wondering why the Dropdown Select from OutSystems UI Web sometimes act different in different screen.
The first picture below shows the dropdown select list from List Screen's search criteria.
The second picture below shows the dropdown select list from Detail Screen's form.
Has anyone has any idea how do I make the dropdown select in picture 2 shows like picture 1? because it's hard to see the results of the options and the typed search filter in picture 2.
I had tried to zoomed out my view in browser (Google Chrome), but it still the same.
Hi Gwen,
For the mentioned requirement, I would suggest you try by setting the DropdownSearch widget AdvancedFormat property with the below-mentioned JSON value.
"{position:'bottom'}"
Hope this helps you!
Kind regards,
Benjith Sam
Hi Benjith,
I set the Dropdown Select Widget AdvancedFormat property with your suggested JSON value, but my dropdown still appear upwards.
I also set my SearchResultsLimit property to 5, and still gave me more than 5 results when I search.
and I found this error in my browser console log. Assumed that this might the cause of AdvancedFormat property not working properly.
I managed to make the Dropdown to appear bottom now. I realized I had input the JSON value in incorrect object.
After I had set it appear to bottom, is there any method to shorten the list length? like in WebPatterns Select2 widget.
I think you don't have options to do that on the AdvancedFormat, but you can do that by CSS using this:
.choices__list--dropdown .choices__list { max-height: 200px; }
You just need to change the value to the one that looks better for you.
Hope this helps!
Sorry for the late reply. For the mentioned use-case, in addition to the solution suggested by Alexandre, a small add-on that I would suggest is to, add a custom style class to the DropdownSearch Widget (ExtendedClass). Define the style definition for the custom class, chaining the pre-defined class as shown below.
CSS Snippet
.custom_SD .choices__list--dropdown .choices__list { max-height: 200px; }
Thank you both of your help! The CSS code works for me.
Much appreciate!
@Benjith Sam
Can you please help me with same issue I am facing in new version of dropdown search. I am using Outsystems UI 2.8.3 and in new version of dropdown search does not have Advanced Format Property.
Hi @Biswajit Kayal
I think you're on the wrong thread since this one is for the OutSystems UI Web and you should be talking about the OutSystems UI in Reactive.There's no advanced format in the new versions of the components, and everything is done through client actions. Feel free to check the links in the Documentation tab of the OutSystems UI to find the migration paths and all the helpful information about the new components.
Cheers,GM
Thanks, but though this thread is for Traditional Web, the solution is applicable to earlier version of dropdown search. I am not looking for migrating the deprecated dropdownsearch instead I am using this in my new application and it seems to be the new dropdownsearch when appears in the bottom half of the screen the option list always opens on top.
That's strange since OutSystems UI Web is on version 1.10.2 and you mentioned version 2.8.3.
I mentioned for OutsystemsUI for Reactive Web App only not OutsystemsUI Web. What I meant is similar behavior was also there in reactive dropdown search and setting advanced format property with position bottom resolves the issue in reactive app but in new version of dropdown search in Outsystem UI 2.8.3, the advanced format option is not there.
Usually, the Dropdowns open on the top, if there's not enough space on the bottom.
Is that the problem you are experiencing?
If that's the case I think that was made on purpose.
Hi Alexandre,Yes, this is problem I'm currently experiencing.