60
Views
8
Comments
Solved
[OutSystems UI Web] Dropdown Select From OutSystemsUI Web
Forge component by OutSystems R&D
61
Published on 22 Feb 2021
Application Type
Traditional Web
Service Studio Version
11.10.5 (Build 37061)

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.

mvp_badge
MVP
Rank: #72
Solution

Hi Gwen,

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;
}

Hope this helps you!


Kind regards,

Benjith Sam

Champion
Rank: #96
Solution

Hi Gwen,


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!

mvp_badge
MVP
Rank: #72
Solution

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

Rank: #4295

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.

Rank: #4295

Hi Benjith, 

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.

Champion
Rank: #96
Solution

Hi Gwen,


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!

mvp_badge
MVP
Rank: #72
Solution

Hi Gwen,

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;
}

Hope this helps you!


Kind regards,

Benjith Sam

Rank: #4295

Hi Benjith, Alexandres

Thank you both of your help! The CSS code works for me. 

Much appreciate!


Champion
Rank: #96

Hi Gwen,


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. 

Rank: #4295

Hi Alexandre,

Yes, this is problem I'm currently experiencing.

mvp_badge
MVP
Rank: #72
Solution

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

Rank: #4295

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.

Rank: #4295

Hi Benjith, 

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.

Champion
Rank: #96
Solution

Hi Gwen,


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!

mvp_badge
MVP
Rank: #72
Solution

Hi Gwen,

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;
}

Hope this helps you!


Kind regards,

Benjith Sam

Rank: #4295

Hi Benjith, Alexandres

Thank you both of your help! The CSS code works for me. 

Much appreciate!