Topic: Issue stacking toasts in React 17
                  
                  jlopez994
                  free
                  asked 3 years ago
                
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
                      
                      Krzysztof Wilk
                      staff
                        answered 3 years ago
                    
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
- ForumUser: 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