Question

在我闪亮的应用程序中，我有4个单选按钮，我想呈现为两列和两行。但是，当我运行应用程序时，标题标签占据第一个位置，使其在第一列中为三行，在第二列中为两行。这里的问题是，第二列中的第一个单选按钮与标签对齐，而不是第一列中的第一个单选按钮。我该如何纠正这个？到目前为止的代码如下：

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)

Answer 1

您需要将CSS定位到.shiny-options-group，并调整一些值

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

在闪亮的多个列中对齐单选按钮

1 个答案: