Topic: Vue modal transitions are not working.
Niek Jonkman free asked 5 years ago
Expected behavior:Vue modals should provide a proper transition [side, frame, fluid]
Actual behavior:All Vue modals drop down from top to bottom. None of them have proper transitions. Side: a upper right modal still drops down from top to bottom, rather then right to center. Frame: a bottom frame still drops down from top to bottom, instead of the other way around. Fluid: same as before, a left fluid model drops from top to bottom instead of left to center.
Resources (screenshots, code snippets etc.): I have copied literally the code and js examples from the modal page. They do not work. I am running this in chrome, but it doesn't work in edge either. If I click the example modal buttons on the page, they do transition the way they are supposed to. But when I go to the modal generator page, the transitions don't work either. On that page, on the right, there is a button that says Launch demo modal. If I click fluid left modal, I get the same behavior as when i try it locally, all transitions are from top to bottom. This seems like a bug to me or wrong example code. Code that I have used:
<template>
<div>
<!-- Side Modal Top Right -->
<mdb-btn color="primary" @click.native="modal = true">Top right</mdb-btn>
<mdb-modal side position="top-right" :show="modal" @close="modal = false">
<mdb-modal-header>
<mdb-modal-title>Modal title</mdb-modal-title>
</mdb-modal-header>
<mdb-modal-body>...</mdb-modal-body>
<mdb-modal-footer>
<mdb-btn color="secondary" @click.native="modal = false">Close</mdb-btn>
<mdb-btn color="primary">Save changes</mdb-btn>
</mdb-modal-footer>
</mdb-modal>
</div>
</template>
<script>
import { mdbModal, mdbModalHeader, mdbModalTitle, mdbModalBody, mdbModalFooter, mdbBtn } from 'mdbvue';
export default {
components: {
mdbModal,
mdbModalHeader,
mdbModalTitle,
mdbModalBody,
mdbModalFooter,
mdbBtn
},
data() {
return {
modal: false
};
}
};
</script>
I need a solution for this. Modals for Angular and React work for me though.
Mikołaj Smoleński staff answered 5 years ago
Hi Niek,
You're right. In an example code the direction
prop is missing. Please add direction
to mdb-modal
. The available options are: top
(default), right
, bottom
, left
. Today we'll add it also to our docs.
Best regards
Niek Jonkman free answered 5 years ago
I've had a older version, but updated it to the newest version. The problem still persists. Also, the problem can still be seen at the generator page:
https://mdbootstrap.com/docs/vue/modals/generator/
Seems to me the bug is still alive.
Magdalena Dembna staff answered 5 years ago
Hi, We've recently worked on this issue - this bug should not appear on MDB Vue 5.1.2 version. Which version do you use? Kind regards, Magdalena
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: 5.1.1
- Device: Desktop
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No