[OutSystems UI Web] Dropdown Select From OutSystemsUI Web

Gwen

Rank: #4295

Solved

[OutSystems UI Web] Dropdown Select From OutSystemsUI Web

Question

Forge

OutSystems 11

OutSystems UI Patterns

Traditional Web

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.

on 18th Jan

Benjith Sam

mvp_badge

MVP

Rank: #72

Solution

Replying to Gwen's comment on 19 Jan 2021 10:03:49

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

See solution in context

on 20th Jan

Alexandre Santos

Champion

Rank: #96

Solution

Replying to Gwen's comment on 19 Jan 2021 10:03:49

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!

See solution in context

on 20th Jan

Benjith Sam

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

See solution in context

on 18th Jan

5 replies

Last reply on 20th Jan

Show thread

Hide thread

Gwen

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.

on 19th Jan

Gwen

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.

on 19th Jan

Alexandre Santos

Champion

Rank: #96

Solution

Replying to Gwen's comment on 19 Jan 2021 10:03:49

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!

on 20th Jan

Benjith Sam

mvp_badge

MVP

Rank: #72

Solution

Replying to Gwen's comment on 19 Jan 2021 10:03:49

Hi Gwen,

CSS Snippet

.custom_SD .choices__list--dropdown .choices__list {
    max-height: 200px;
}

Hope this helps you!

Kind regards,

Benjith Sam

on 20th Jan

Gwen

Rank: #4295

Hi Benjith, Alexandres

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

Much appreciate!

on 20th Jan

Alexandre Santos

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.

on 18th Jan

1 reply

on 19th Jan

Show thread

Hide thread

Gwen

Rank: #4295

Hi Alexandre,

Yes, this is problem I'm currently experiencing.

on 19th Jan

Benjith Sam

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

on 18th Jan

5 replies

Last reply on 20th Jan

Show thread

Hide thread

Gwen

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.

on 19th Jan

Gwen

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.

on 19th Jan

Alexandre Santos

Champion

Rank: #96

Solution

Replying to Gwen's comment on 19 Jan 2021 10:03:49

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!

on 20th Jan

Benjith Sam

mvp_badge

MVP

Rank: #72

Solution

Replying to Gwen's comment on 19 Jan 2021 10:03:49

Hi Gwen,

CSS Snippet

.custom_SD .choices__list--dropdown .choices__list {
    max-height: 200px;
}

Hope this helps you!

Kind regards,

Benjith Sam

on 20th Jan

Gwen

Rank: #4295

Hi Benjith, Alexandres

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

Much appreciate!

on 20th Jan

Training

Documentation

[OutSystems UI Web] Dropdown Select From OutSystemsUI Web