euvl / vue-js-modal

Easy to use, highly customizable Vue.js modal library.
http://vue-js-modal.yev.io
MIT License
4.36k stars 594 forks source link

scrollable not working when adaptive mode is true #674

Open ShekhSaifuddin007 opened 3 years ago

ShekhSaifuddin007 commented 3 years ago

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 commented 3 years ago

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

ShekhSaifuddin007 commented 3 years ago

@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 commented 3 years ago

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

justwiebe commented 3 years ago

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 commented 3 years ago

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

Romko775 commented 3 years ago

@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 commented 3 years ago

@BakoviDagi Thanks brother it's working,

GuasaPlay commented 3 years ago

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

ShekhSaifuddin007 commented 3 years ago

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

GuasaPlay commented 3 years ago

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

ShekhSaifuddin007 commented 3 years ago

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

justwiebe commented 3 years ago

@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 commented 3 years ago

@ShekhSaifuddin007 following css rule fixed the scrolling issue for me

.vm--modal {
  height: auto !important;
}
GuasaPlay commented 3 years ago

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

GuasaPlay commented 3 years ago

@SaurabhKharivale Thanks it's working

stale[bot] commented 3 years ago

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 commented 3 years ago

I have the same issue.

pierrexp9 commented 3 years ago

issue still existing today (so the stale bot keeps its cool) meanwhile, the css fix is quite nice : https://github.com/euvl/vue-js-modal/issues/674#issuecomment-844301259

Roninii commented 3 years ago

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[bot] commented 2 years ago

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 commented 2 years ago

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,