aligning radio buttons in multiple columns in shiny

问题

In my shiny application, I have 4 radio buttons which I want to render as two columns and two rows. But, when I run the app, the title label takes the first position making it three rows in first col and two rows in second col. The problem here is, the first radio button in the second column aligns with the label instead of the first radio button in column one. How do i rectify this? The code so far is as follows:

library(shiny)
radioLab <-list(tags$div(align = 'left', 
                      class = 'multicol', 
                      radioButtons(inputId  = 'typeofanalysis', 
                                         label = "TRIPS & TRAVELS",
                                         choices  = c("OVERNIGHT TRIPS - LAST 365 DAYS","OVERNIGHT TRIPS - LAST 30 DAYS", "SAMEDAY TRIPS - LAST 30 DAYS","LONG DURATION TRIPS - 180-365 DAYS"),
                                         selected = "OVERNIGHT TRIPS - LAST 365 DAYS",
                                         inline   = FALSE), style = "font-size:75%")) 

multicolLab <- list(tags$head(tags$style(HTML("
                                       .multicol { 
                                       height: 200px;
                                       width: 600px;
                                       -webkit-column-count: 2; /* Chrome, Safari, Opera */ 
                                       -moz-column-count: 2;    /* Firefox */ 
                                       column-count: 2; 
                                       -moz-column-fill: auto;
                                       -column-fill: auto;
                                       } 
                                       ")))) 

ui <- shinyUI(
navbarPage("TITLE",
  tabPanel("TABULATE",
      multicolLab,
            fluidRow(    
                column(width = 6, radioLab, align = "center"),
                column(6)
            )
  )))

server <- shinyServer(function(input, output) {

})

shinyApp(ui,server)

回答1:

You need to target your CSS to .shiny-options-group, and also adjust some values

.shiny-options-group { 
  height: auto;
  width: 600px;
  -webkit-column-count: 2; /* Chrome, Safari, Opera */ 
  -moz-column-count: 2;    /* Firefox */ 
  column-count: 2; 
  -webkit-column-fill: balance;
  -moz-column-fill: balance;
  column-fill: balance;
  margin-top: 0px;
} 

.control-label {
  padding-bottom: 10px;
}

div.radio {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-bottom: 5px;
}

来源：https://stackoverflow.com/questions/39532909/aligning-radio-buttons-in-multiple-columns-in-shiny

标签

Shiny