Topic: Issue stacking toasts in React 17
Hello, I'm using MDB5 React UI KIT Pro Advanced, version 2.1.0 with React 17 and toasts stacking mode is not working as expected.
Expected behavior
The toasts should be stacked without taking up the space of the rest
Actual behavior
Resources (screenshots, code snippets etc.)
This is the code I'm using to create the toasts:
{state.notifications.map((notification, idx) => (
<MDBToast
color="success"
show
autohide
stacking
offset={10}
position="bottom-right"
delay={200000}
appendToBody
key={idx}
headerContent={
<>
<strong className="me-auto">{idx}</strong>
<small>11 mins ago</small>
</>
}
bodyContent="Stacking Element"
></MDBToast>
))}
BTW: I tried to create a pro snippet to make an example but it doesn't allow me... I purchased MDB React Advanced - 1 user, Annual
Hi!
Thanks for reporting that bug. It seems there's a problem with calculating or getting some offset values of the toast component. We'll try to fix it in the next release. For now, I think you can increase the value of the offset property to about 50 :)
According to the pro snippet - there are some issues with pro ARV snippets. Sorry about that :(
Keep coding!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: MDB5 1.4.0
- Device: Desktop
- Browser: Google Chrome
- OS: Windows 11
- Provided sample code: No
- Provided link: No