CODEWITHSUNDEEP
cssrshinyalignment
pisistrato
pisistrato

Reputation: 395

R shiny align 100 radioGroupButtons 10x10

I have the following example, which renders 100 reactive radio button.

library(shiny)
library(shinyWidgets)    
if (interactive()) {
  
  ui <- fluidPage(
    tags$h1("radioGroupButtons examples"),
    
    radioGroupButtons(
      individual = T, selected = "",status = "danger",
      inputId = "somevalue1",
      label = "Make a choice: ",
      choices = rep("x", 100)
    ),
    verbatimTextOutput("value1"),
  )
  server <- function(input, output) {
    
    output$value1 <- renderPrint({ input$somevalue1 })
    
  }
  shinyApp(ui, server)
  
}

I would like now to arrange/align the buttons in 10 columns by 10 rows, but I cannot figure out which CSS class I should target to do so. enter image description here

Upvotes: 1

Views: 261

Answers (1)

Hugo Levet
Hugo Levet

Reputation: 367

You can use CSS flexbox or grid

Flexbox example :

#content {
    display: flex;
    flex-wrap: wrap;
    width: 250px;
}

#content>input {
    width: 25px;
    height: 25px;
}

Grid example :

#content {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
}

Upvotes: 1

Related Questions