css Question posted in
Some basic documentation can be found here.

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

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?

checkbox buttons stay on a single row

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)
Tags:

2

Answers


  1. 0

    Yes it’s a task for css. Add this to your UI (under title):

      tags$head(tags$style("
  .btn-group-container-sw{
    display: flex;
    flex-wrap: wrap;
                       }")),

    enter image description here

    Login or Signup to reply.
  2. 0

    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;
}

    enter image description here

    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)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search