Topic: How to position toast below navbar when using stacking
I am using a toast with stacking enabled, that needs to be positioned below the navbar, approximately 80px from the top. Problem is that offset does not work with stacking since if I set it to 80px it creates 80px between each toast, and if I use :
.toast {
margin-top: 10px !important;
top: 80px !important;
}
I also get 80px between, and if I use only
.toast {
top: 80px !important;
}
They display on top of each other,
How can I achive to position the first toast 80px from top, while having the expected behaviour of the stacking?
You can use the option container. The downside of this solution is that toast will be placed inside this container so if you have a long scrollable page, the toast will be placed in the container you choose and may not be visible readily when they appear.
Alternatively, you may want to write some custom JS that will check how many toasts are visible on the page and set offset based on that.
Stig Kølbæk pro premium priority commented 2 years ago
Thank you kpienkowska for your answer,
I see the downside to using the container .. I think I need to think different and place the toast at the bottom right instead since that on the page I develop will make more sense since I cannot position it.
Best Regards Stig
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 6.2.0
- Device: Laptop
- Browser: Edge
- OS: Windows 11
- Provided sample code: No
- Provided link: No