27
Views
4
Comments
Solved
Trying to scroll in Popup (Reactive Web)
Question

Hi,

I'm moving an application from Traditional Web to Reactive Web. I use 3 Modal's on a web screen to show specific data. In Traditional Web these Modal's work as intended - I have a couple of tables which usually cause scrolling to be necessary as the content inside the modal will exceed the height of the screen.


In Reactive Web I'm using the Popup widget to try to accomplish the same thing but no scroll appears, and it just extends down the screen where I can't see a lot of the content.

Does anyone know any workaround/fix for this?

Any replies would be greatly appreciated!

mvp_badge
MVP
Rank: #96
Solution

Hi Aaron,

Define the below mentioned CSS style to the encapsulated parent div/Container

overflow-y: auto;
height: 100px;


If you don't know the height of the container and you want to show vertical scrollbar when the container reaches a fixed height say 100px, use max-height instead of height property. 

Note: If you give overflow-y:auto; instead of overflow: auto;, because this makes the element to scroll only vertical but not horizontal. 


Hope this helps you!


Regards,

Benjith Sam

Rank: #378

Just to add, you could set the height to be in vh values (view height percentage), could save you the trouble of dealing with absolute pixels.

Rank: #3950

Yes that worked perfectly, thank you very much!