Card modal window scrolling issue on mobile

Support
1

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/

I think this is an issue inherent to something in BetterForms since the issue does not exist on 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

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.

2

Edit: Also see: Scrollable card modal - not working
and
Fixed Navigation - #2 by delfs

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.

3

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. 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.

4

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:

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
image766×93 7.84 KB

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, 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?

5

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

6

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?

7

We’re using vue-js-modal@1.3.35. On their repo it’s stating that current version is not stable yet.

8

Thanks, that’s what I was looking for. But to clarify, are you referring to this?

image
image866×173 9.22 KB

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 :man_shrugging:

9

@dansmith65 Did you find a Git issue with the <2.0 libraries?

10

I believe this is where it was fixed: 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

11

@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.