mdb-data-position attribute not working for toast

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>
        </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 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

bmurphy premium answered 7 months ago

0 0 Best answer

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 7 months ago

It works. Click button in example to see: https://mdbootstrap.com/snippets/standard/kpienkowska/6092578

Add comment

Copleutre priority answered 11 months ago

0 0 Best answer

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

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

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

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

ming

60Support score
8Questions 3Answers 5Snippets