cssrbuttonshinybslib

How to move expand button in bslib::card() where full_screen = TRUE to the top right?


I have a shiny app where I've placed a table within a bslib::card().

I want this table to be expandable so I've added the parameter full_screen = TRUE.

By default the "expand" button is placed on the bottom right.

How can I edit my code to place this button on the top right (or even top left) of the card instead?

table within a card with expand button

Here is some reproducible code:

library(shiny)
library(bslib)

# Define UI
ui <- fluidPage(
  theme = bs_theme(bootswatch = "minty"),
  titlePanel("Table in a card()"),
  
  sidebarLayout(
    sidebarPanel(
      textInput("filter_name", "Filter by Name", ""),
    ),
    
    mainPanel(
      card(
        title = "Data Table",
        full_screen = TRUE,
        tableOutput("mytable")
      )
    )
  )
)

# Define server logic
server <- function(input, output) {
  # Generate sample data
  data <- data.frame(
    Name = c("John", "Jane", "Alice", "Bob", "Charlie", "David"),
    Age = c(25, 30, 35, 40, 45, 50),
    Score = c(80, 75, 90, 85, 88, 92)
  )
  
  # Render table
  output$mytable <- renderTable({
    filtered_data <- data
    if (!is.null(input$filter_name) && input$filter_name != "") {
      filtered_data <- data[data$Name == input$filter_name, ]
    }
    filtered_data
  })
}

# Run application
shinyApp(ui = ui, server = server)


Solution

  • Insert the following style into your fluidPage:

      tags$head(tags$style(
        HTML(
          "
            .bslib-full-screen-enter {
              bottom: var(--bslib-full-screen-enter-bottom);
            }
          "
        )
      )), 
    

    enter image description here

    If you want to have it on the top left, also add

    right: var(--bslib-full-screen-enter-right);