Repository navigation
Conversation
Full-screen cards previously sat at Bootstrap's popover z-index tier (1070), so modal dialogs -- including Shiny's showModal() dialogs and progress indicators -- painted behind an expanded card. Cards now stack in the offcanvas tier ($zindex-offcanvas, 1045), below modals, with the card backdrop at $zindex-offcanvas-backdrop (1040), mirroring the offcanvas/backdrop pairing. Both levels are configurable at runtime via the new --bslib-card-full-screen-z-index and --bslib-card-full-screen-backdrop-z-index CSS custom properties. Tooltips and popovers triggered elsewhere in the app would still paint above the expanded card, so entering full screen now dismisses open dropdowns, tooltips, and popovers whose triggers live outside the card being expanded, including bslib's web-component variants. The full-screen enter button now shares the card's z-index variable and stays hidden while a nested bslib-offcanvas is open or transitioning, so it no longer paints through the offcanvas backdrop. Fixes #1360
When a card enters full screen, open tooltips and popovers are now found via their visible overlay element and its aria-describedby link to the trigger, rather than by data-bs-toggle attributes on the trigger. This also dismisses instances created programmatically (e.g. new bootstrap.Tooltip(el)), which carry no such attribute and would otherwise paint above the expanded card. The dropdown toggle lookup now matches only the menu's direct sibling (:scope > [data-bs-toggle='dropdown']) instead of the first matching descendant, so a parent containing multiple dropdowns targets the right instance.
gadenbuie
marked this pull request as ready for review
October 5, 2026 15:59
cpsievert
approved these changes
Oct 5, 2026
|
|
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #1360
Summary
Full-screen cards previously sat at Bootstrap's popover z-index tier (1070), so modal dialogs — including Shiny's
showModal()dialogs and progress indicators — painted behind an expanded card. Cards now stack in the offcanvas tier ($zindex-offcanvas, 1045), below modals, with the card backdrop at$zindex-offcanvas-backdrop(1040), mirroring Bootstrap's offcanvas/backdrop pairing.--bslib-card-full-screen-z-indexand--bslib-card-full-screen-backdrop-z-indexCSS custom properties.aria-describedbylink to the trigger, so instances created programmatically (e.g.new bootstrap.Tooltip(el)) are covered too. The dropdown lookup matches only the menu's direct sibling toggle, so parents containing multiple dropdowns target the right instance.bslib-offcanvasis open or transitioning, so it no longer paints through the offcanvas backdrop.Known behavior changes: the page offcanvas backdrop no longer dims a full-screen card, and stray in-app dropdowns are dismissed when entering full screen.
Verification
Run the issue's minimal example — full-screen the card, then open the modal, which now appears above it: