Stack Overflow Asked by Sean Thorburn on December 22, 2020
I am looking for the most efficient way to display stacking Bootstrap 4 toasts at the bottom right of the page.
I haven’t been able to find any decent examples of how to do this online.
Currently I have them stacking from the top right.
<div aria-live="polite" aria-atomic="true" style={{ position: "relative" }}>
<div style={{ position: "absolute", top: 0, right: 0, zIndex: 9999, float: "right" }}>
{errors.map(function (error, index) {
return (
<Toast key={index}>
<ToastHeader fade="true" icon="danger" aria-live="assertive" aria-atomic="true">
Error
</ToastHeader>
<ToastBody>{error}</ToastBody>
</Toast>
);
})
}
</div>
</div>
Any help will be appreciated.
Remove relative
from the parent div, and set bottom: 0
...
<div aria-live="polite" aria-atomic="true">
<div style={{ position: "absolute", bottom: 0, right: 0, zIndex: 9999, float: "right" }}>
{errors.map(function (error, index) {
return (
<Toast key={index}>
<ToastHeader fade="true" icon="danger" aria-live="assertive" aria-atomic="true">
Error
</ToastHeader>
<ToastBody>{error}</ToastBody>
</Toast>
)
})
}
</div>
</div>
Correct answer by Zim on December 22, 2020
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP