Can bslib nested card fullscreen behavior show just the nested card?

Question

When I use the option full_screen = TRUE with nested cards, clicking the fullscreen icon maximizes both cards. Can it be set to show just the internal card as fullscreen?

library(shiny)
library(bslib)

ui = page(
  card(
    full_screen = F,
    card_header(
      "Main card",
    ),
      card(
        full_screen = T,
        card_header(
          "Plot card"
        ),
        plotOutput("plot")
      # )
    )
  )
)

server = function(input, output)
{
  output$plot = renderPlot(hist(rnorm(100)))
}

shinyApp(ui, server)

score 1 · Answer 1 · answered May 14 '23 at 07:26

Here is solution using Javascript:

library(shiny)
library(bslib)

# Define custom JavaScript
js <- '
function toggleFullscreen(element) {
  if (!document.fullscreenElement) {
    element.requestFullscreen().catch(console.log);
  } else {
    document.exitFullscreen();
  }
}

$(document).on("shiny:connected", function() {
  $("#nestedCard").on("click", function() {
    toggleFullscreen(document.querySelector("#nestedCard"));
  });
});
'

ui = page(
  headerPanel("Nested Fullscreen Card"),
  mainPanel(
    tags$head(tags$script(HTML(js))), # Inject custom JS
    tags$div(
      id = "mainCard",
      class = "card",
      tags$div(
        class = "card-body",
        tags$h5("Main card", class = "card-title"),
        tags$div(
          id = "nestedCard",
          class = "card",
          tags$div(
            class = "card-body",
            tags$h5("Plot card", class = "card-title"),
            plotOutput("plot")
          )
        )
      )
    )
  )
)

server = function(input, output)
{
  output$plot = renderPlot(hist(rnorm(100)))
}

shinyApp(ui, server)

Hmm not working for me. I'm also hoping to find a solution using `bslib` `card` functions like I show in my example. — matt, May 16 '23 at 23:43
It actually works fine in my browser and not in RStudio's app preview — matt, May 21 '23 at 15:16

score 0 · Accepted Answer · answered May 21 '23 at 16:57

0

The problem has been fixed in a newer version of bslib: https://github.com/rstudio/bslib/issues/558

answered May 21 '23 at 16:57

matt

318
3
11

Can bslib nested card fullscreen behavior show just the nested card?

2 Answers2