How to set an overflow of buttons to the next line for small pages?

Question

Using bslib, I want the checkbox buttons here to overflow to the next line when the width of the page is too small. How can this be accomplished?

PS: Is this best accomplished using CSS?

Here is the app code:

library(shiny)
library(shinyWidgets)
library(bslib)
library(htmltools)

ui <- page_fluid(
  title = "App",
  
  bslib::accordion(
    accordion_panel(
      id = "panel1",
      title = "panel 1",
      htmltools::div(
        checkboxGroupButtons(
          inputId = "edit_selection",
          label = "List of variables",
          choices = c("NULL")
        )
      )
    ),
    accordion_panel(
      id = "panel2",
      title = "panel 2"
    )
  )
)

server <- function(input, output, session) {
  
  test_data <- c(
    "Long Variable One", "Long Variable Two", "Long Variable Three", "Long Variable Four", "Long Variable Five",
    "Long Variable Six", "Long Variable Seven", "Long Variable Eight", "Long Variable Nine", "Long Variable Ten",
    "Long Variable Eleven", "long Variable Twelve"
  )
  
  observeEvent(test_data, {
    updateCheckboxGroupButtons(
      session,
      inputId = "edit_selection",
      choices = test_data
    )
  })
}

shinyApp(ui, server)

Answer 1

You could use this css:

• Line break if the space is not enough:

  #edit_selection > div {
   display: inline-block;
  }
  

• If you would like to have a fixed with of the buttons:

  #edit_selection > div * {
    width: 100px;
  }
  

• Exact vertical alignment of the button rows:

  .btn-group > :not(.btn-check:first-child) + .btn, .btn-group > .btn-group:not(:first-child) {
     margin-left: 0;
  }
  

library(shiny)
library(shinyWidgets)
library(bslib)
library(htmltools)

ui <- page_fluid(
  title = "App",
  
  tags$head(
    tags$style(
      HTML(
        "#edit_selection > div {",
        "  display: inline-block;",
        "}",
        " ",
        "#edit_selection > div * {",
        "  width: 100px;",
        "}",
        " ",
        ".btn-group > :not(.btn-check:first-child) + .btn, .btn-group > .btn-group:not(:first-child) {",
        "  margin-left: 0;",
        "}"
      )
    )
  ),
  
  bslib::accordion(
    accordion_panel(
      id = "panel1",
      title = "panel 1",
      htmltools::div(
        checkboxGroupButtons(
          inputId = "edit_selection",
          label = "List of variables",
          choices = c("NULL")
        )
      )
    ),
    accordion_panel(
      id = "panel2",
      title = "panel 2"
    )
  )
)

server <- function(input, output, session) {
  
  test_data <- c(
    "Long Variable One", "Long Variable Two", "Long Variable Three", "Long Variable Four", "Long Variable Five",
    "Long Variable Six", "Long Variable Seven", "Long Variable Eight", "Long Variable Nine", "Long Variable Ten",
    "Long Variable Eleven", "long Variable Twelve"
  )
  
  observeEvent(test_data, {
    updateCheckboxGroupButtons(
      session,
      inputId = "edit_selection",
      choices = test_data
    )
  })
}

shinyApp(ui, server)