Align checkBoxGroupInput vertically and horizontally

Question

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)

Ian Wesley · Accepted Answer · 2017-04-03T15:17:57.443

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)

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

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.

I can look at this in chrome in a couple of hours when I will be on a computer with chrome and edit my answer. I think firefox and opera think they are being smart and only using two columns, because there are only four items. If you add one or take one away it goes back to three columns. — Ian Wesley, Apr 03 '17 at 13:10
thx, the grid fill order has some preference for columns, not rows. that is why some odd behaviour for 4,7,10 elements, etc. — Ferroao, Apr 03 '17 at 15:21
Did you need anything else to accept and close out this answer? — Ian Wesley, Apr 05 '17 at 21:48

Align checkBoxGroupInput vertically and horizontally

1 Answers1

Linked