Vue modal transitions are not working.

Topic: Vue modal transitions are not working.

Niek Jonkman asked 2 weeks 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:

    <!-- 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-title>Modal title</mdb-modal-title>
            <mdb-btn color="secondary" @click.native="modal = false">Close</mdb-btn>
            <mdb-btn color="primary">Save changes</mdb-btn>

  import { mdbModal, mdbModalHeader, mdbModalTitle, mdbModalBody, mdbModalFooter, mdbBtn } from 'mdbvue';
  export default {
    components: {
    data() {
      return {
        modal: false

I need a solution for this. Modals for Angular and React work for me though.

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

Magdalena Dembna staff answered a week 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

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:

Seems to me the bug is still alive.

Got it working, thanks!

Please insert min. 20 characters.


Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: Vue
  • MDB Version: 5.1.1
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No