垂直和水平对齐checkBoxGroupInput

Question

在类似的帖子（How to align a group of checkboxGroupInput in R Shiny）中，复选框仅垂直对齐（如我的示例中）或仅水平对齐（R Shiny display checkboxGroupInput horizontally）。我想知道是否有办法在两种意义上实现这一点（当在列中）。

library(shiny) 
examplesubset<-read.table(text=" 
          elements locations 
          element_One A,M,P,R 
          element_Two A,B,C,M,P,E,I 
          element_Three G,M,T,F,O,H,A,B,C,D" , header=TRUE, stringsAsFactors=FALSE) 
examplesubset$elements<-as.factor(examplesubset$elements) 

ui<-fluidPage( 
    tags$head(tags$style(HTML(" 
          .multicol { 
          -webkit-column-count: 3; /* Chrome, Safari, Opera */ 
          -moz-column-count: 3; /* Firefox */ 
          column-count: 3; 
          -moz-column-fill: auto; 
          -column-fill: auto; 
          } 
          "))), 
    titlePanel("Panel"), 
    sidebarLayout(  
    sidebarPanel(
     selectInput("elements", "Select elements:", 
        choices=examplesubset$elements) 
    ) , 
    mainPanel(
     fluidRow(
     column(3, 
       uiOutput("checkboxesui") 
     )))) 
) 

server<-function(input, output,session) { 
    elementsselected<-reactive({ 
    sp<-examplesubset[examplesubset$elements==input$elements,] 
    sp<-droplevels(sp) 
    }) 
    locationsreactive<- reactive({ 
    j<-as.factor(unique(unlist(strsplit(elementsselected()$locations, ",", fixed = TRUE)))) 
    j<-droplevels(j) 
    }) 
    output$checkboxesui<-renderUI({ 
    tags$div(align = 'left', 
      class = 'multicol', 
      checkboxGroupInput("locationscheckboxes", "locations", 
           choices=levels(locationsreactive()) 
           , selected=c()) 
      ) 
    }) 
} 
shinyApp(ui = ui, server = server) 

Answer 1

下面的代码应该做的伎俩。你需要应用CSS栏下方，你让他们一个div，然后从上方和下方的复选框去掉填充，我也改变了一栏中填入到均衡：

library(shiny) 
examplesubset<-read.table(text=" 
          elements locations 
          element_One A,M,P,A,R,T 
          element_Two A,B,C,M,P,E,I,N,S 
          element_Three G,M,T,F,S,V,P" , header=TRUE, stringsAsFactors=FALSE) 
examplesubset$elements<-as.factor(examplesubset$elements) 

ui<-fluidPage( 
    tags$head(tags$style(HTML(" 
          .multicol .shiny-options-group{ 
          -webkit-column-count: 3; /* Chrome, Safari, Opera */ 
          -moz-column-count: 3; /* Firefox */ 
          column-count: 3; 
          -moz-column-fill: balanced; 
          -column-fill: balanced; 
          } 
          .checkbox{ 
          margin-top: 0px !important; 
          -webkit-margin-after: 0px !important; 
          } 
          "))), 
    titlePanel("Panel"), 
    sidebarLayout(  
    sidebarPanel(
     selectInput("elements", "Select elements:", 
        choices=examplesubset$elements) 
    ) , 
    mainPanel(
     fluidRow(
     column(3, 
       uiOutput("checkboxesui") 
     )))) 
) 

server<-function(input, output,session) { 
    elementsselected<-reactive({ 
    sp<-examplesubset[examplesubset$elements==input$elements,] 
    sp<-droplevels(sp) 
    }) 
    locationsreactive<- reactive({ 
    j<-as.factor(unique(unlist(strsplit(elementsselected()$locations, ",", fixed = TRUE)))) 
    j<-droplevels(j) 
    }) 
    output$checkboxesui<-renderUI({ 
    tags$div(align = 'left', 
      class = 'multicol', 
      checkboxGroupInput("locationscheckboxes", "locations", 
           choices=levels(locationsreactive()) 
           , selected=c()) 
    ) 
    }) 
} 
shinyApp(ui = ui, server = server) 

另一种选择是使用CSS flexbox：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

这将解决您所描述的排序问题，但您需要使用shiny-options-group div的大小以使所有内容符合您的要求，具体取决于您的内容。对您的复选框选项进行重新排序可能会更容易，因此它们会以您想要的方式显示。