Issue stacking toasts in React 17


Topic: Issue stacking toasts in React 17

jlopez994 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

enter image description here

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!


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • 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