573
Views
4
Comments
Scrolling in popup window
Question
Application Type
Reactive
Service Studio Version
11.50.12 (Build 48233)
Platform Version
11.9.2.31730

Hello

I want a scrollable popup window but there isn'a setting for this anywhere?

I found this post https://www.outsystems.com/forums/discussion/64846/trying-to-scroll-in-popup-reactive-web/ but it didn't work for me

Hello there! Right now, the Popup doesn't have that set you want. So you need to costumize.

Have a look at this component! 

https://www.outsystems.com/forge/component-overview/9972/hi-element-scroll

You can see at the end of the demo screen you can see a button to open a popup that has the component to give the scroll

https://hiinteractive.outsystemscloud.com/HiElementScroll/Sample.aspx




Or...

you can use the max-height: 'choose the height' and the overflow-y: scroll to trigger the scroll. on the element, you want to give the scroll.

Kind Regards,

Márcio

Hi Gleb,

The component suggested by Marcio should do the job however a simple alternative solution would be creating a css class with the following properties: 

.scrollable-container {
   height: 300px; //Could be set to whatever height you are after
   overflow-y: auto;
}

You can then assign the scrollable-container class to your container (by replacing "overflow-y: auto;" with "scrollable-container" in your screenshot)

Regards,

Ossama

 

hi Ossama Ghanem,

this did not work for me,

I have a reusable block inside the container, could that be the reason

Regards

Subramaniam


I know I'm late to the party, but if anyone else has this issue I was able to achieve that effect for all popups with this CSS:

.popup-dialog {

     display: flex;

}

.popup-content {

     overflow-y: auto;

     width: 500px;

}


If you only want some popups to behave in this way, you could apply a custom class, and constrain the CSS selectors accordingly.

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