Topic: MDBToast overlap
japan
priority
asked 10 months 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 10 months ago
When I used this example code, I can't close toast ... video
Mateusz Lazaru staff commented 10 months 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 10 months 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);
setStackingToasts([
...stackingToasts,
{
color: colors[stackingColor],
count: stackingToasts.length > 0 ? stackingToasts.length + 1 : 1,
},
]);
};
return (
<>
<MDBBtn className='m-1' onClick={handleClick}>
Show toast notification
</MDBBtn>
<MDBStack className='position-absolute'>
{
stackingToasts.map((item) => (
<MDBToast
color={item.color}
defaultOpen
autohide
width={450}
delay={2000}
key={item.count}
headerContent={
<>
<strong className='me-auto'>{item.count}</strong>
<small>11 mins ago</small>
</>
}
bodyContent='Stacking Element'
/>
))
}
</MDBStack>
</>
);
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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