Topic: mdb-data-position attribute not working for toast

ming priority asked 3 years ago

Expected behavior The MDB Toast position option is not working as intended. When I fill in the data-mdb-position="top-right", the toast notification should be in the top-right corner of my webpage.

Actual behavior The toast notification does not work, and it remains in the top left. I put the toast in my navbar html, and I've included a screenshot of what the actual behavior looks like.

Resources (screenshots, code snippets etc.) You can see that the toast is in the top left, and is below the navbar. I would like it to perform as demonstrated in the documentation, where the notification is in the top right with a little bit of padding.

Code Snippet:

MDBootstrap 11 mins ago
        <div class="toast-body">
            <p>New achievement Unlocked!</p>
            <small>{{ badge }}</small>

Michał Duszak staff commented 3 years ago

Could you recreate your issue in the snippet? Have you put toast in your main element? I can't see the data-mdb-position="top-right" in the code sample you provided.

ming priority commented 3 years ago

Michał Duszak staff commented 3 years ago

Thank you. By the time we fix this, please consider placing toast programmatically

bmurphy premium answered 1 month ago

Running into the same issue on 7.2.0. Looking for a workaround as 8.0.0 creates issues with my modals

Kamila Pieńkowska staff commented 1 month ago

It works. Click button in example to see:

Copleutre priority answered 5 months ago

Could this issue be solved ? It's a major component Thank you

Kamila Pieńkowska staff commented 5 months ago

It works. But for the position attribute to apply you need to show it using the show method. If it is displayed with CSS class show JS that positions toast does not run.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.3.0
  • Device: Macbook Air
  • Browser: Google Chrome
  • OS: MacOS Big Sur 11.1
  • Provided sample code: No
  • Provided link: No