Aaron Gordon
Rank: #3865
96Views
4Comments
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!

0
0
on 2020-09-22
Copy link to comment
Benjith Sam
mvp_badge
MVP
Rank: #72
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

3
0
on 2020-09-22
Copy link to comment
Mariano Picco
Rank: #381

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.

1
0
on 2020-09-22
Copy link to comment
Aaron Gordon
Rank: #3865

Yes that worked perfectly, thank you very much!

1
0
on 2020-09-22
Copy link to comment
Benjith Sam
mvp_badge
MVP
Rank: #72

Aaron Gordon wrote:

Yes that worked perfectly, thank you very much!

You are most welcome Aaron :)

Thank you @Mariano for adding informative point :)


Regards,

Benjith Sam 

1
0
on 2020-09-22
Copy link to comment