Toasts seem to be hidden behind drawers
Maintainers usually reply within 1 day
Nobody has claimed this yet.
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 72/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Active
- Tech stack
- css, html, javascript, scss
- Domain
- frontend
Research direction
Reproduce the supplied dialog.drawer and .toast-container markup, then inspect the drawer/offcanvas and toast styling and stacking rules. Identify why the toast is obscured while the drawer is open, make the smallest CSS change, and verify the toast remains visible in the affected browser.
Written by the indexing model from the issue text.
Description
Prerequisites
- I have searched for duplicate or closed issues
- I have validated any HTML to avoid common problems
- I have read the contributing guidelines
Describe the issue
It seems like there may be a regression with toasts being hidden behind an open drawer, similar to #34028.
Reduced test cases
Given the following simplified html
<body>
<!-- body content -->
<dialog class="drawer drawer-end" tabindex="-1" id="offcanvasSettings" aria-labelledby="offcanvasSettingsHeaderText">
<div class="drawer-header page-header"></div>
<div class="drawer-body"></div>
</dialog>
<div aria-live="polite" aria-atomic="true" class="position-relative">
<div class="end-0 p-3 toast-container top-0" id="toast-container"></div>
</div>
</body>
If the dialog content is, for example, a form that triggers a toast, the toast gets added to the DOM but they never appear on screen.
What operating system(s) are you seeing the problem on?
Windows
What browser(s) are you seeing the problem on?
Microsoft Edge
What version of Bootstrap are you using?
v6.0.0-alpha.1
- Dominant language
- MDX
- Stars
- 175k
- Forks
- 78.5k
- Avg merge
- 13h 44m
- Merged PRs (30d)
- 95
Getting set up
- No Dockerfile or Docker Compose file
- Has a pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from twbs/bootstrap
-
bug css docs v6
Difficulty 1/5 Under an hour Newbie friendliness 75/100
Maintainers usually reply within 1 day
-
css docs v6
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
twbs/bootstrap#43190 · 1 reaction ·
Maintainers usually reply within 1 day
-
File input height taller than expectedPossibly taken A pull request linked to this issue is open or already merged. Openbug confirmed css has-pr v6
Difficulty 2/5 1-3 hours Newbie friendliness 73/100
Maintainers usually reply within 1 day
-
Theme variations like theme-contrast do not work as expected in a table.Possibly taken @bercedev claimed this 3 days ago. Openbug confirmed css has-pr v6
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
Maintainers usually reply within 1 day
-
docs: datepicker data attributes & form submissionPossibly taken A pull request linked to this issue is open or already merged. Opendocs feature has-pr html needs-decision v6
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
Maintainers usually reply within 1 day
Similar issues
-
✏️ Editing - Tags
Difficulty 2/5 1-3 hours Newbie friendliness 66/100
openfoodfacts/openfoodfacts-server#15127 ·
Maintainers usually reply within 1 day
-
enhancement good first issue hacktoberfest help wanted
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
grasshopper-protocol/grsshppr#172 ·
Maintainers usually reply within 1 day
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
jellyfin/Swiftfin#2388 · 1 comment ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
Andbal23/dynamic-music-pill#195 ·
Maintainers usually reply within 1 day