mdb-data-position attribute not working for toast

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

ming pro premium 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>
        </div>
    </div>

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. https://mdbootstrap.com/snippets/

ming pro premium priority commented 3 years ago

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

Michał Duszak staff commented 3 years 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

Add comment

Copleutre pro premium priority answered 10 months ago

0 0 Best answer

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

Kamila Pieńkowska staff commented 10 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.

Add comment

bmurphy pro premium answered 7 months ago