# Scroll function on data overflow not working in the modal **URL:** \ **Category:** Ask us anything\ **Tags:** modal\ **Created:** [July 8, 2025, 3:51am UTC](https://community.weweb.io/t/scroll-function-on-data-overflow-not-working-in-the-modal/19121 "2025-07-08T03:51:23Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![pacifist9722](https://avatars.discourse-cdn.com/v4/letter/p/4491bb/32.png) [@pacifist9722](https://community.weweb.io/u/pacifist9722)\ **Post date:** [July 8, 2025, 3:51am UTC](https://community.weweb.io/t/scroll-function-on-data-overflow-not-working-in-the-modal/19121/1 "2025-07-08T03:51:23Z")
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. ![Screenshot 2025-07-07 164422](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/3/3269b36a463bf7351d053947f5f56c659726c34a.jpeg) ![Screenshot 2025-07-07 164501](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/f/f0a50b8ff3c32442aa5954716120fed73a2c951c.jpeg) Anyone else facing the same issue? ---
**Author:** ![Agustin\_Carozo](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/agustin_carozo/32/13231_2.png) [@Agustin\_Carozo](https://community.weweb.io/u/Agustin_Carozo)\ **Post date:** [July 9, 2025, 5:27pm UTC](https://community.weweb.io/t/scroll-function-on-data-overflow-not-working-in-the-modal/19121/2 "2025-07-09T17:27:15Z")
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? ---
**Author:** ![Bruno](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/bruno/32/14495_2.png) [@Bruno](https://community.weweb.io/u/Bruno)\ **Post date:** [July 9, 2025, 6:57pm UTC](https://community.weweb.io/t/scroll-function-on-data-overflow-not-working-in-the-modal/19121/3 "2025-07-09T18:57:16Z")
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 ---
**Author:** ![pacifist9722](https://avatars.discourse-cdn.com/v4/letter/p/4491bb/32.png) [@pacifist9722](https://community.weweb.io/u/pacifist9722)\ **Post date:** [July 10, 2025, 5:43am UTC](https://community.weweb.io/t/scroll-function-on-data-overflow-not-working-in-the-modal/19121/4 "2025-07-10T05:43:56Z")
Hi Here’s the video of the same. https://www.loom.com/embed/0b1c1cba70d14313abe4e9f1b2cdc7e9?sid=eb89f220-93af-4cf7-8358-c8d2f399d064 ---
**Author:** ![Batik\_Okazov](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/batik_okazov/32/12688_2.png) [@Batik\_Okazov](https://community.weweb.io/u/Batik_Okazov)\ **Post date:** [July 10, 2025, 12:21pm UTC](https://community.weweb.io/t/scroll-function-on-data-overflow-not-working-in-the-modal/19121/5 "2025-07-10T12:21:59Z")
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. ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/1/107b7bcf0b06e935f4adb15827bdd1b24d856112.jpeg) 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. ---
**Author:** ![pacifist9722](https://avatars.discourse-cdn.com/v4/letter/p/4491bb/32.png) [@pacifist9722](https://community.weweb.io/u/pacifist9722)\ **Post date:** [July 11, 2025, 4:34am UTC](https://community.weweb.io/t/scroll-function-on-data-overflow-not-working-in-the-modal/19121/6 "2025-07-11T04:34:44Z")
Hi Thank you for your suggestion, It worked but only partially. Here’s the loom video for the same. https://www.loom.com/embed/dd7732fca3ce4272b262c818b5488c63?sid=f00ea252-3c8a-46d0-a406-ca5bca2b0b7c ---
**Author:** ![pacifist9722](https://avatars.discourse-cdn.com/v4/letter/p/4491bb/32.png) [@pacifist9722](https://community.weweb.io/u/pacifist9722)\ **Post date:** [July 11, 2025, 5:54am UTC](https://community.weweb.io/t/scroll-function-on-data-overflow-not-working-in-the-modal/19121/7 "2025-07-11T05:54:40Z")
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.