Topic: MDBToast overlap

japan priority asked 1 month ago

I find an error overlap the toasts, I used code from example. I think, a problem is in property appendToBody, which doesn't work correctly

Video functionality display

japan priority answered 1 month ago

When I used this example code, I can't close toast ... video

Mateusz Lazaru staff commented 1 month ago

My bad, I should have used defaultOpen instead open.

I've fixed the example from the snippet, try to use it now. It should work fine.

I'll also add a task to edit code in the documentation, thanks for reporting the issue.

Mateusz Lazaru staff answered 1 month ago

Toasts have by default an absolute position, and it's the same for first and n'th toast.If you want to stack them one above another, use MDBStack component, example:

import React, { useState } from 'react';
import { MDBToast, MDBBtn, MDBStack } from 'mdb-react-ui-kit';

export default function App() {
  const [stackingToasts, setStackingToasts] = useState<Array<Record<string, any>>>([]);
  const [stackingColor, setStackingColor] = useState(0);

  const handleClick = () => {
    const colors = ['primary', 'warning', 'info', 'success', 'secondary', 'danger', 'light'];

    stackingColor + 1 > colors.length - 1 ? setStackingColor(0) : setStackingColor(stackingColor + 1);

        color: colors[stackingColor],
        count: stackingToasts.length > 0 ? stackingToasts.length + 1 : 1,

  return (
      <MDBBtn className='m-1' onClick={handleClick}>
        Show toast notification

      <MDBStack className='position-absolute'>
      { => (
                <strong className='me-auto'>{item.count}</strong>
                <small>11 mins ago</small>
            bodyContent='Stacking Element'


Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 8.0.0
  • Device: PC
  • Browser: Chrome
  • OS: Win10
  • Provided sample code: No
  • Provided link: Yes