垂直和水平对齐checkBoxGroupInput [英] Align checkBoxGroupInput vertically and horizontally

问题描述

在类似的文章中(如何对齐R Shiny 中的checkboxGroupInput组)复选框仅垂直对齐(在我的示例中)或仅水平对齐(

In a similar post (How to align a group of checkboxGroupInput in R Shiny) checkboxes are aligned only vertically (as in my example) or only horizontally (R Shiny display checkboxGroupInput horizontally ). I wonder if there is a way to accomplish this in both senses (when in columns).

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)

推荐答案

以下代码可以解决问题.您需要将CSS列在其放置位置的下方应用div，然后从复选框上方和下方删除填充，我还将列填充更改为平衡":

The following code should do the trick. You needed to apply the CSS columns a div below where you had them and then remove padding from above and below the check boxes, I also changed the column fill to balanced:

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/

The other option is to use CSS flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

这将解决您描述的排序问题，但是您将需要根据Shiny-options-group div的大小进行调整，以使所有内容都符合所需的方式，具体取决于您的内容.仅对复选框选项重新排序可能会更容易，以便它们以您想要的方式显示.

This would solve the ordering issues you described, but you would need to dink with the sizes of the shiny-options-group div to get everything to fit the way you want, depending on your content. It is probably easier to just reorder your checkbox options so they display the way you want.

这篇关于垂直和水平对齐checkBoxGroupInput的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！