Open ShekhSaifuddin007 opened 3 years ago
@euvl Is there something to make only x-axis adaptive?
@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"
Same issue, been fixing this for 2 months now but got no luck.
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);
}
}
});
@BakoviDagi good thing but where or how I can find the AbstractModal
in my project I can't find this
@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
@BakoviDagi Thanks brother it's working,
@Romko775 @ShekhSaifuddin007 How can I find AbstracModal because it shows an error that the Modal could not find?
@GuasaPlay paste the above code inside your app.js it will work
@SaurabhKharivale I'm using Nuxtjs so there is no app.js
file, but there is a nuxt.config.js
file. 😕
@GuasaPlay nuxt app has main.js which is compiled by webpack paste the code inside main.js
@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);
}
}
});
@ShekhSaifuddin007 following css rule fixed the scrolling issue for me
.vm--modal {
height: auto !important;
}
@BakoviDagi My configuration is the same, but it still doesn't work. Maybe it's the nuxt version
@SaurabhKharivale Thanks it's working
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.
I have the same issue.
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
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.
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.
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,
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
is my setup is correct or I missed something..