mdb-data-position attribute not working for toast


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

ming pro premium priority asked a year 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>
        </div>
    </div>

Michał Duszak staff commented a year 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. https://mdbootstrap.com/snippets/


ming pro premium priority commented a year ago

https://mdbootstrap.com/snippets/standard/ming/3130545


Michał Duszak staff commented a year ago

Thank you. By the time we fix this, please consider placing toast programmatically https://mdbootstrap.com/snippets/standard/m-duszak/3131881#js-tab-view


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Open

Specification of the issue
  • User: Pro
  • Premium support: No
  • 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