Skip to content

docs: note toast/overlay placement inside drawers and dialogs - #43224

Open
ump45nose wants to merge 2 commits into
twbs:mainfrom
ump45nose:docs/toast-drawer-top-layer-43183
Open

ump45nose wants to merge 2 commits into
twbs:mainfrom
ump45nose:docs/toast-drawer-top-layer-43183

Conversation

@ump45nose

Copy link
Copy Markdown
Contributor

Description

Document that modal drawers (and dialogs) render in the browser top layer via native <dialog>, so a page-level .toast-container stays behind an open drawer even when toast z-index is higher on the Bootstrap scale.

  • Add an Overlays section to the Drawer docs (mirroring Dialog overlays guidance): put .toast-container inside the drawer markup; use data-bs-container for tooltips/popovers.
  • Add a Drawers and dialogs subsection under Toast placement that cross-links Dialog overlays.

Motivation & Context

Reported in #43183 (toast hidden behind an open drawer, similar to the old offcanvas case #34028). In v6, drawers use showModal() / the top layer, so raising --toast-zindex cannot fix stacking the way the v5 offcanvas z-index change did. Dialog docs already explain this pattern; Drawer and Toasts docs did not.

Assistance: drafting and wording helped by an AI coding assistant; content reviewed against existing Dialog overlays docs and the issue reproduction.

Type of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Refactoring (non-breaking change)
  • Breaking change (fix or feature that would change existing functionality)

Checklist

  • I have read the contributing guidelines
  • My code follows the code style of the project (using npm run lint)
  • My change introduces changes to the documentation
  • I have updated the documentation accordingly
  • I have added tests to cover my changes
  • All new and existing tests passed

Live previews

Related issues

Fixes #43183

Modal drawers and dialogs use the native dialog top layer, so a
toast-container under body stays hidden behind them regardless of
z-index. Document placing toasts inside the drawer/dialog markup and
cross-link the existing Dialog overlays guidance.

Fixes twbs#43183
@julien-deramond julien-deramond added v6 v6, the main branch docs Documentation site and its content labels Oct 29, 2026

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

docs Documentation site and its content v6 v6, the main branch

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Toasts seem to be hidden behind drawers

2 participants