Skip to content

Full-screen cards stack below modals, dismiss stray overlays - #1361

Open
gadenbuie wants to merge 10 commits into
mainfrom
fix/1360-modals-show-below-full-screened-cards
Open

gadenbuie wants to merge 10 commits into
mainfrom
fix/1360-modals-show-below-full-screened-cards

Conversation

@gadenbuie

Copy link
Copy Markdown
Member

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.

  • 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.
  • Entering full screen dismisses open dropdowns, tooltips, and popovers whose triggers live outside the card, so they no longer paint above the expanded card. Tooltips and popovers are located via their visible overlay and its aria-describedby link 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.
  • The full-screen enter button 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.

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:

library(shiny)
library(bslib)

ui <- page_fillable(
  card(max_height = 300, full_screen = TRUE,
    card_header("Card example with fullscreen + modal"),
    card_body(
      p("Full screen this card first, then press", em("open modal")),
      actionButton("open_modal", "Open modal"),
      actionButton("show_notification", "Show notification")
    )
  )
)

server <- function(input, output, session) {
  observeEvent(input$open_modal, {
    showModal(modalDialog("Modal content.", easyClose = TRUE,
      footer = modalButton("Close")))
  })
  observeEvent(input$show_notification, {
    showNotification("This is a sample notification.", type = "message")
  })
}

shinyApp(ui, server)

gadenbuie and others added 7 commits October 5, 2026 11:22
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
gadenbuie marked this pull request as ready for review October 5, 2026 15:59
@gadenbuie
gadenbuie requested a review from cpsievert October 5, 2026 15:59
@CLAassistant

Copy link
Copy Markdown

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
You have signed the CLA already but the status is still pending? Let us recheck it.

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

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Modals show below full-screened cards

3 participants