Align checkBoxGroupInput theo chiều dọc và chiều ngang

Question

Trong hộp kiểm tương tự (How to align a group of checkboxGroupInput in R Shiny) được căn chỉnh theo chiều dọc (như trong ví dụ của tôi) hoặc chỉ theo chiều ngang (R Shiny display checkboxGroupInput horizontally). Tôi tự hỏi nếu có một cách để thực hiện điều này trong cả hai giác quan (khi ở trong cột).

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

Các mã sau đây nên làm các trick. Bạn cần phải áp dụng các cột CSS một div bên dưới nơi bạn có họ và sau đó loại bỏ đệm từ trên và dưới các hộp kiểm, tôi cũng đã thay đổi cột điền để cân bằng:

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) 

Các tùy chọn khác là sử dụng CSS flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Điều này sẽ giải quyết các vấn đề đặt hàng bạn đã mô tả, nhưng bạn cần phải khai thác với các kích thước của div tùy chọn nhóm sáng bóng để có được mọi thứ phù hợp với cách bạn muốn, tùy thuộc vào Nội dung. Có thể dễ dàng hơn trong việc sắp xếp lại các tùy chọn hộp kiểm của bạn để chúng hiển thị theo cách bạn muốn.