As I was moving all my previous deprecated modals to the new type, realised that the I’m not able to scroll in case of data overflow in the newer version.
Anyone else facing the same issue?
Hi there 
I’m not sure I understand what it is that you are trying to achieve.
Can you share a video of the behavior you wanted (with the old one) and the one you are getting with the new one?
Hey Pacifist,
Make sure:
- Modal has:
-
- Either Height or Max Height that allows for content to be scrolled
- Overflow property is:
-
- Applied in cascade to the “content” elements you’ll use.
-
- Set as AUTO, not Scroll. I usually only use scroll when I need to set the overflow value x different from y, but that requires binding the value manually.
Remember to use the New Popup feature instead of the Modal elements. Which I believe is what you mentioned you were doing.
Hope this helps.
Best,
Bruno
1 Like
Hi
Here’s the video of the same.
hi,
try to change the height from “auto” to “fixed” as Bruno mentioned above. It will limit the height of your “content” div and the scrollbar should appear.
As for the compairing the old one and new one popup versions, I’d say that the new one has a more predictable behavior. If you not limit your height, then the “content” div will have auto-set height to encompass all the child elements even if it extends beyond the visible area of the page.
I can assume the new version have another settings of “position” and “z-index” (or something related) that can make it to go out of the main DOM tree. And that’s why its auto-set height is not limited and you don’t see the scrollbar. But I’m not sure, just guessing.
2 Likes
Hi Thank you for your suggestion,
It worked but only partially. Here’s the loom video for the same.
Got the solution from @rivan_sigarlaki
you can set the height to 100vh to refer to user’s screen 100% height, or you can bind and formulate calculation such as:
screen.screenSize.height * 80/100 + “px” → this mean it’ll have 80% of the screen height, or
calc(100vh - 240px) → and it will have 100% of the screen height minus 240 px to give some space in between.
2 Likes