# Card modal window scrolling issue on mobile **URL:** \ **Category:** Support\ **Tags:** modal\ **Created:** [September 16, 2021, 8:01pm UTC](https://forum.klai.studio/t/card-modal-window-scrolling-issue-on-mobile/411 "2021-09-16T20:01:02Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![dansmith65](https://forum.klai.studio/user_avatar/forum.klai.studio/dansmith65/32/72_2.png) [@dansmith65](https://forum.klai.studio/u/dansmith65)\ **Post date:** [September 16, 2021, 8:01pm UTC](https://forum.klai.studio/t/card-modal-window-scrolling-issue-on-mobile/411/1 "2021-09-16T20:01:02Z")
I’ve experienced this issue on my main app, but re-produced it in a new app just to confirm the issue wasn’t related to my app config. If you open a card modal with height of auto and scrollable true, with contents larger than the mobile devices screen height, it will scroll erratically. You can see this behavior yourself by clicking the **Modal** button here: [https://dansmith65.fmbetterforms.com/](https://dansmith65.fmbetterforms.com/) I think this is an issue inherent to _something_ in BetterForms since the issue does not exist on [http://vue-js-modal.yev.io](http://vue-js-modal.yev.io) when using the **Demo: Width: 60%, Height: auto** button. Items to note in the video: - I’m scrolling down slowly, but when I release, it jumps to the bottom of the window. - After that, I can never scroll to the very top of the form again [https://dl.dropboxusercontent.com/s/aw7s8qlfug5pcvw/screen-20210916-125340.mp4](https://dl.dropboxusercontent.com/s/aw7s8qlfug5pcvw/screen-20210916-125340.mp4) I think this is a high priority issue because it renders modal windows larger than the screen unusable. Depending on the settings used, users could be stuck on the modal with no way to close it. ---
**Author:** ![delfs](https://forum.klai.studio/user_avatar/forum.klai.studio/delfs/32/411_2.png) [@delfs](https://forum.klai.studio/u/delfs)\ **Post date:** [September 17, 2021, 2:03am UTC](https://forum.klai.studio/t/card-modal-window-scrolling-issue-on-mobile/411/2 "2021-09-17T02:03:19Z")
Edit: Also see: [Scrollable card modal - not working](https://forum.fmbetterforms.com/t/scrollable-card-modal-not-working/134) and [Fixed Navigation - #2 by delfs](https://forum.fmbetterforms.com/t/fixed-navigation/300/2) Hmm, I think what you can do is not rely on the modal to support the scrolling and just scroll the modals page’s body What `formType` is the card modal form? The new 'formblank` type supports two new keys: `styleClassesPage` - classes are applied to the outermost div of the page `styleClassesBody` - classes are applied to the pages body, in the event you are using a form header slot, this allows better targeting. ---
**Author:** ![dansmith65](https://forum.klai.studio/user_avatar/forum.klai.studio/dansmith65/32/72_2.png) [@dansmith65](https://forum.klai.studio/u/dansmith65)\ **Post date:** [September 17, 2021, 7:37pm UTC](https://forum.klai.studio/t/card-modal-window-scrolling-issue-on-mobile/411/3 "2021-09-17T19:37:35Z")
I guess I’ll just try and work around this, then. I have this issue on various forms with various form types. This example I referenced used the default app template, so it used `formplain`. Note that tailwinds `h-screen`, which applies css `100vh` doesn’t work well on a mobile browser by itself either: [The trick to viewport units on mobile | CSS-Tricks](https://css-tricks.com/the-trick-to-viewport-units-on-mobile/). By default, that solution will crop the bottom of the content if the user hasn’t (or can’t) scroll the address bar out of view. ---
**Author:** ![dansmith65](https://forum.klai.studio/user_avatar/forum.klai.studio/dansmith65/32/72_2.png) [@dansmith65](https://forum.klai.studio/u/dansmith65)\ **Post date:** [September 17, 2021, 10:02pm UTC](https://forum.klai.studio/t/card-modal-window-scrolling-issue-on-mobile/411/4 "2021-09-17T22:02:11Z")
I just realized that this issue can be re-produced in a desktop browser as well by resizing the browser window after opening the modal: [https://dl.dropboxusercontent.com/s/h0whfee9t3448ob/2021-09-17\_144318.mp4](https://dl.dropboxusercontent.com/s/h0whfee9t3448ob/2021-09-17_144318.mp4) Here’s the element, which has top set to a negative value, which is probably the cause of this issue on mobile (it IS the cause on Desktop): ![image](https://forum.fmbetterforms.com/uploads/default/original/1X/949beb32d00f61c128aaafb248f9323dea739190.png) I checked the event listeners on that object and found an onWindowResize handler that runs a function in vue-js-modal. Going back to my original post, this _isn’t_ an issue on [http://vue-js-modal.yev.io](http://vue-js-modal.yev.io/), so I’m wondering if BetterForms is using an older version of that library where this bug still exists, but perhaps it’s been fixed since then? ---
**Author:** ![delfs](https://forum.klai.studio/user_avatar/forum.klai.studio/delfs/32/411_2.png) [@delfs](https://forum.klai.studio/u/delfs)\ **Post date:** [October 7, 2021, 4:18pm UTC](https://forum.klai.studio/t/card-modal-window-scrolling-issue-on-mobile/411/5 "2021-10-07T16:18:14Z")
I have been able to reproduce this. I think as a work around I would set a maxheight for the modal and then pass the scrolling to the contents. I will have one of the team make an example if you would like. c ---
**Author:** ![dansmith65](https://forum.klai.studio/user_avatar/forum.klai.studio/dansmith65/32/72_2.png) [@dansmith65](https://forum.klai.studio/u/dansmith65)\ **Post date:** [October 7, 2021, 6:51pm UTC](https://forum.klai.studio/t/card-modal-window-scrolling-issue-on-mobile/411/6 "2021-10-07T18:51:47Z")
No, I don’t need an example of the work-around. What version of vue-js-modal is BetterForms using? Assuming it’s not current, is there a reason you don’t want to update that library? ---
**Author:** ![earamizu](https://forum.klai.studio/letter_avatar_proxy/v4/letter/e/5daacb/32.png) [@earamizu](https://forum.klai.studio/u/earamizu)\ **Post date:** [October 8, 2021, 12:11am UTC](https://forum.klai.studio/t/card-modal-window-scrolling-issue-on-mobile/411/7 "2021-10-08T00:11:50Z")
We’re using `vue-js-modal@1.3.35`. On their repo it’s stating that current version is not stable yet. ---
**Author:** ![dansmith65](https://forum.klai.studio/user_avatar/forum.klai.studio/dansmith65/32/72_2.png) [@dansmith65](https://forum.klai.studio/u/dansmith65)\ **Post date:** [October 8, 2021, 7:24pm UTC](https://forum.klai.studio/t/card-modal-window-scrolling-issue-on-mobile/411/8 "2021-10-08T19:24:32Z")
Thanks, that’s what I was looking for. But to clarify, are you referring to this? ![image](https://forum.fmbetterforms.com/uploads/default/original/1X/b4c77722ef55f605fe863df0d34b0f53c5a8ba7a.png) That message appears to be outdated now that 2.0.1 is released. That said, 2.0.1 was only released a few months ago, but it also has 115k weekly downloads, so I suspect it’s fairly well tested 🤷‍♂️ ---
**Author:** ![delfs](https://forum.klai.studio/user_avatar/forum.klai.studio/delfs/32/411_2.png) [@delfs](https://forum.klai.studio/u/delfs)\ **Post date:** [October 12, 2021, 5:06pm UTC](https://forum.klai.studio/t/card-modal-window-scrolling-issue-on-mobile/411/9 "2021-10-12T17:06:36Z")
@dansmith65 Did you find a Git issue with the \<2.0 libraries? ---
**Author:** ![dansmith65](https://forum.klai.studio/user_avatar/forum.klai.studio/dansmith65/32/72_2.png) [@dansmith65](https://forum.klai.studio/u/dansmith65)\ **Post date:** [October 12, 2021, 6:37pm UTC](https://forum.klai.studio/t/card-modal-window-scrolling-issue-on-mobile/411/10 "2021-10-12T18:37:29Z")
I believe this is where it was fixed: [https://github.com/euvl/vue-js-modal/pull/610](https://github.com/euvl/vue-js-modal/pull/610) It was part of a fairly substantial refactor of the entire resize handling code. Or, it might have been fixed by this simpler change on the same day here: [https://github.com/euvl/vue-js-modal/issues/302](https://github.com/euvl/vue-js-modal/issues/302) ---
**Author:** ![delfs](https://forum.klai.studio/user_avatar/forum.klai.studio/delfs/32/411_2.png) [@delfs](https://forum.klai.studio/u/delfs)\ **Post date:** [October 18, 2021, 2:25pm UTC](https://forum.klai.studio/t/card-modal-window-scrolling-issue-on-mobile/411/11 "2021-10-18T14:25:30Z")
@earamizu Can we bump the base code change to this new version. Would need to check for breaking changes first of course. I will think if any they would present themselves in the appdev editor fairly fast.