scrollable not working when adaptive mode is true

[ShekhSaifuddin007]

Problem:

I'm using this plugin the problem is when I use :adaptive="true" I can not scroll the modal when the modal height is bigger than the screen, how can I solve this.?

Version:

"vue-js-modal": "^2.0.0-rc.6"

Example & screenshots:

this my setup

<modal name="quick-view"
      width="90%"
      height="auto"
      :maxWidth="1000"
      :maxHeight="600"
      :adaptive="true"
      :scrollable="true">
     long content goes here
     .......................................................................
     ........................................................................
     ........................................................................
</modal>

is my setup is correct or I missed something..

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

[Romko775]

@euvl Is there something to make only x-axis adaptive?

[ShekhSaifuddin007]

@euvl can you suggest to me how can get this to work with :adaptive="true" if there is no way to do it then how can we get that functionality without :adaptive="true"

[jrbautista10]

Same issue, been fixing this for 2 months now but got no luck.

[BakoviDagi]

As a temporary workaround until a PR is merged you can extend the component and override the "autoHeight" computed:

import Vue from 'vue';
import VModal from 'vue-js-modal/dist/ssr.nocss';
import AbstractModal from 'vue-js-modal/src/components/Modal';

Vue.use(VModal, {
  componentName: 'abstract-modal',
});

Vue.component('vue-modal', {
  extends: AbstractModal,
  computed: {
    /**
     * Fix using "adaptive" and "scrollable" at the same time
     */
    autoHeight () {
      if (this.scrollable) {
        return 'auto';
      }
      return AbstractModal.computed.autoHeight.apply(this);
    }
  }
});

[ShekhSaifuddin007]

@BakoviDagi good thing but where or how I can find the AbstractModal in my project I can't find this

[Romko775]

@BakoviDagi good thing but where or how I can find the AbstractModal in my project I can't find this

import AbstractModal from 'vue-js-modal/src/components/Modal';

try this

[ShekhSaifuddin007]

@BakoviDagi Thanks brother it's working,

[GuasaPlay]

@Romko775 @ShekhSaifuddin007 How can I find AbstracModal because it shows an error that the Modal could not find?

[ShekhSaifuddin007]

@GuasaPlay paste the above code inside your app.js it will work

[GuasaPlay]

@SaurabhKharivale I'm using Nuxtjs so there is no app.js file, but there is a nuxt.config.js file. 😕

[ShekhSaifuddin007]

@GuasaPlay nuxt app has main.js which is compiled by webpack paste the code inside main.js

[BakoviDagi]

@GuasaPlay I'm also using nuxt. You can just use a plugin:
nuxt.config.js:

export default: {
  // ...
  plugins: ['~/plugins/vue-js-modal.js']
}

plugins/vue-js-modal.js:

import Vue from 'vue';
import VModal from 'vue-js-modal/dist/ssr.nocss';
import AbstractModal from 'vue-js-modal/src/components/Modal';

Vue.use(VModal, {
  componentName: 'abstract-modal',
});

Vue.component('vue-modal', {
  extends: AbstractModal,
  computed: {
    /**
     * Fix using "adaptive" and "scrollable" at the same time
     */
    autoHeight () {
      if (this.scrollable) {
        return 'auto';
      }
      return AbstractModal.computed.autoHeight.apply(this);
    }
  }
});

[SaurabhKharivale]

@ShekhSaifuddin007
following css rule fixed the scrolling issue for me

.vm--modal {
  height: auto !important;
}

[GuasaPlay]

@BakoviDagi My configuration is the same, but it still doesn't work. Maybe it's the nuxt version

[GuasaPlay]

@SaurabhKharivale Thanks it's working

[stale]

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.

[jtrod]

I have the same issue.

[pierrexp9]

issue still existing today (so the stale bot keeps its cool)
meanwhile, the css fix is quite nice : #674 (comment)

[Roninii]

This Nuxt soution does in fact fix the issue for me, as well as the "bouncing" effect from #624. However, there are a couple tweaks I had to make that weren't obvious at the time (to me).

A. You have to add .vue to the end of this line
import AbstractModal from 'vue-js-modal/src/components/Modal.vue'
B: This one is obvious in retrospect, but you have to use <VueModal /> in your templates now instead of just <Modal />. Obviously you can change the name of the component to whatever you want, so this one is less important. Just a silly gotcha that I fell for.

[stale]

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.

[DimitriBe]

Had the same issue today, using Vue.js 2.

Both solutions @BakoviDagi and @SaurabhKharivale seem to work but the latter is more simple so implementing that one,