垂直和水平對齊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的大小以使所有內容符合您的要求，具體取決於您的內容。對您的複選框選項進行重新排序可能會更容易，因此它們會以您想要的方式顯示。