Vue modal transitions are not working.


Topic: Vue modal transitions are not working.

Niek Jonkman asked 3 months 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 3 months 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


Magdalena Dembna staff answered 3 months 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


Niek Jonkman answered 3 months 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.


Niek Jonkman answered 3 months ago

Got it working, thanks!


Please insert min. 20 characters.
Status

Answered

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