Vue-js-modal: Scrollable not working when dynamic content in modal is rendered after opening modal

[TomDeSmet]

Problem:

I have a modal which has 2 Vue components inside that depend on API calls. So nothing is rendered initially but after a few milliseconds the API returns the correct data and the Vue components are rendered.
The height of the modal adapts to this new content, but a scrollbar isn't triggered.

Version:

2.0.0-rc.3

Code example:

Vue.use(VModal, { dynamic: true, dynamicDefaults: { clickToClose: false }, injectModalsContainer: true })

this.$modal.show(ProductModal, {
    productId: productId,
    defaultVariantId: variantId
}, {
    height: "auto",
    width: "90%",
    scrollable: true,
    adaptive: true,
    'max-width': 1200
});

I have checked stackoverflow for solutions and 100% sure that this issue is not not related to my code.

[euvl]

Can you please create a sandbox to replicate an issue? Thanks

[TomDeSmet]

I did some further testing, but I'm not understanding what's going on.
It goes wrong on Firefox. At first, it seems that it works, but whenever I click somewhere, scrolling gets disabled.

On Chrome and Safari it seems to go fine.
But on neither browser I can drag the browser bar itself. I can only scroll with the mouse wheel.

Sandbox:
https://xfp79.csb.app/

[bogdan-dukhevych]

I have the same issue but just with a list of images inside modal. Also Firefox.

[kimchristiansen]

Same here on Firefox 77.0.1
The scrollbar on the right appears. Scrolling with keyboard is no problem, but i can't scroll with the mouse wheel.

[Mr-Ev-H]

I'm experiencing the same issue - I can scroll fine on Chrome, but have issues scrolling the modal with Firefox 77.01. Keyboard scrolling works fine but mousewheel does not.

I've noticed that scrolling works if the scroll event starts when the mouse pointer is over either an anchor element or possibly element that receives mouse input in some way (in my case scrolling over a GChart element scrolls the whole modal).

My hacky fix will be to wrap the body of the modal in an anchor tag.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[kimchristiansen]

The error is not only with dynamic content, but also with normal added modals.

With version 2.0.0-rc.6 the scroll error now behaves different. The modal adds the viewport height as inline style to the modal. So, now scrolling is not even working with the scrollbars anymore.
Is there an update in the documentation for it?

My component setup:
<modal name="dependencies" width="100%" height="auto" :maxWidth="1000" :adaptive="true" :scrollable="true"><p>long text</p> </modal>

Adding overflow-y: auto to the vm--modal class will fix the problem.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically closed.

[LuizVisnadi]

I'm encoutering the same issue with the 2.0.0-rc6 version and using dynamic modals.

After some investigation, _div_.vm--overlay is the source of the problem. Overlay style rules seem to conflict with container style rules, specially "height: 100vh".

When I add the css rules below, the error disappears.

.vm--overlay {
    height: 0 !important;
}
.vm--container {
    /* add to keep a modal backdrop */
    background-color: rgba(0, 0, 0, 0.85) !important;
}

[FrancisCaille]

Having the same problem with RC.6