603
Views
12
Comments
Solved
Dropdown list cut off in popup (Reactive)
Application Type
Reactive
Service Studio Version
11.11.3 (Build 43291)
Platform Version
11.12.0 (Build 29969)

After setting the Options Content attribute to "Custom" for the dropdown widget in a popup (Reactive app), the dropdown list in the popup is cut off at the bottom. How can the display error be fixed?

2021-09-06 15-09-53
Dorine Boudry
 
MVP
Solution

Hi Ralf,

i had a try with using a webblock as custom dropdown content, how about using this css

.popup-dialog{
    overflow: visible;
}

It worked in my quick test, but I haven't tested extensively, I don't know if there are any adverse effects on other parts of your popup or screen.

Dorine



2021-06-01 05-56-33
Komal Kumbhar

Hi,

You should scroll down the pop up's scroller to see the dropdown,

Kind Regards,


2018-10-30 14-59-27
Ralf Trautz

The scrollbar of the popup disappears as soon as you click on it, because the dropdown is deprived of focus and it hides the list.

Furthermore, the display over the edge of the popup works, as long as you set Options Content to "Text only".

2021-06-01 05-56-33
Komal Kumbhar

So you want the content "Custom" only and it's not working,

I am checking at my end, i'll let you know if it works 

Kind Regards,


2018-10-30 14-59-27
Ralf Trautz

The following screenshot illustrates the problem depending on whether Options Content is set to "Text only" or "Custom".


1. "Text only" works fine

2. "Custom" in comparison not

2021-06-01 05-56-33
Komal Kumbhar

Hi,

Please check this one,

https://komal-k.outsystemscloud.com/DataModelingExercise/Screen1?_ts=637587741795486704

is this way you implement?

Kind regards,


2018-10-30 14-59-27
Ralf Trautz

I can't judge whether your solution fits. Is the Options Content attribute set to "Custom" in the dropdown? Furthermore, in the dropdown, instead of an expression, a block is called that displays the flag and name of the team.

2021-06-01 05-56-33
Komal Kumbhar

Yes i have used Custom as content and now i have used block in drop down, 

check my OML here, you can find it in screen 1


dropdowninreactive.oml
2018-10-30 14-59-27
Ralf Trautz


Komal, thank you very much for your efforts. The whole thing works until you insert an image in the block. For whatever reason with an image the block is not displayed correctly.

2021-06-01 05-56-33
Komal Kumbhar

Alright,  if you get the solution then post it here, so every one also get it,


2021-09-06 15-09-53
Dorine Boudry
 
MVP
Solution

Hi Ralf,

i had a try with using a webblock as custom dropdown content, how about using this css

.popup-dialog{
    overflow: visible;
}

It worked in my quick test, but I haven't tested extensively, I don't know if there are any adverse effects on other parts of your popup or screen.

Dorine



2022-01-06 15-48-22
Aäron Jansen (Creetion)

I ran into the same problem recently. I found another simple solution that I'm posting here so others hopefully can benefit: I set the height of the popup element to 100% in the Styles editor: 

2021-09-06 15-09-53
Dorine Boudry
 
MVP

Hi @Aäron Jansen (Creetion) ,

this was a problem 1,5 years ago to do with overflow, not with the size of the dropdown.

I just tested, and the css rule "overflow:visible" is now part of Outsystems UI, so no longer is a problem.

Dorine

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