Vue-js-modal: Show modal but not have it scroll to the top of page

[jennapederson]

Is it possible (or are there future plans) to show the modal but not have it scroll back to the top of the page?

For instance, I have a list of items. The user can open the details of an item via modal. If they want to see the details for an item that is at the bottom of the list, the modal opens but it scrolls to the top to display it.

[euvl]

Hey @jennapederson,

I am afraid I cannot replicate this behaviour, could you please create jsfiddle or test project?
Thanks.

[jennapederson]

Of course! Here's an example project - https://github.com/jennapederson/todo-list.

If you spin this up (see the readme) and click on the last item in the list, the modal does display but only after scrolling to the top. This may be as intended, just looking to see if there are thoughts on handling this so that it doesn't scroll or a possible workaround.

[euvl]

Thanks, will take a look tonight 😄

[euvl]

Hey @jennapederson,

Tiny update on this one:
I think the issue will be fixed when we will introduce adding overflow:hidden to body.

Hope you are still using plugin, ty 😄

[euvl]

Hey @jennapederson,
Can you try now with v1.2.10, wondering if change did fix your problem. Ty.

[jennapederson]

I have pulled down the updated version but am still seeing the issue. Updated here: https://github.com/jennapederson/todo-list

[jennapederson]

I noticed that the change in v1.2.10 only happens when scrollable is enabled on the modal. I didn't actually need to be able to scroll within the modal, so I haven't enabled it. However even when I do enable it, the modal is still displayed at the top of the browser rather than at the current scroll position.

[jennapederson]

I think this is happening because the containing element - v--modal-overlay has a fixed position, so a position of say 200px for displaying the modal will use the containing element's edges.

[euvl]

Yes, i think that it is just the way it works 😞

[vergil-lai]

@jennapederson I have the same problem, how do you solve it？

[jennapederson]

@vergil-lai I don't have a work around for this.

[sbahr001]

I found a work around with dynamic child component:

this.$parent.$el.scrollTo(0,0))

Not the best but it does work.

[mintcs]

Have been experiencing this problem just now and after a bit of head scratching it turns out for me the problem was because the modal is being launched via a link with href="#", which was causing the page to go back to the top. Setting @click.prevent="" on the link fixed the issue.

[jchristopher]

I ran into this issue today and it's only showing up when scrollable is enabled (as per @jennapederson's note above) so my fix (which is likely limited to my use case but may apply elsewhere is to override this included CSS:

.v--modal-overlay .v--modal-box { overflow: hidden; }

with something more specific that allows the modal content itself to scroll:

.my-app .v--modal-overlay .v--modal-box { overflow-y: scroll; }

Doing so (and omitting scrollable) results in the modal being sized as defined, and scrolling within the modal itself when applicable. Note that the vertical scrollbar is always visible, however.

[usolved]

Just wanted to note that I have exactly the same issue but the work arounds mentioned in this thread didn't work for me.

[petermullen]

As @mintcs mentioned, I had the issue when launched from <a href="#">. I found changing to a <button> fixed it, even without using @click.prevent="".