How to align a group of checkboxGroupInput in R Shiny

Question

I created a set of checkboxGroupInput using the code below but it is not displayed properly. It look like this:

Any idea how can I force a proper alignment in Shiny?

ui.R

uiOutput(outputId = "numSelector")

server.R

        output$numSelector <- renderUI({
        out <- checkboxGroupInput(
            inputId = "numSelector",
            label   = "Select the numbers to filter on:",
            choices = selectRange(input$dataName),
            inline = TRUE
        )
        return(out)
    })

Answer 1

A solution to this problem can be achieved by adjusting the div tags. A small example shiny app for illustration:

library(shiny)

# tweaks, a list object to set up multicols for checkboxGroupInput
tweaks <- 
  list(tags$head(tags$style(HTML("
                                 .multicol { 
                                   height: 150px;
                                   -webkit-column-count: 5; /* Chrome, Safari, Opera */ 
                                   -moz-column-count: 5;    /* Firefox */ 
                                   column-count: 5; 
                                   -moz-column-fill: auto;
                                   -column-fill: auto;
                                 } 
                                 ")) 
                                 ))

# values to show, or not show, these will be the 'choices' and 'selected' values
# for the checkboxGroupInput()
all_rows <- 1:25
names(all_rows) <- paste("Row", all_rows)

# data control: the checkboxes will control the data values plotted
controls <-
  list(h3("Multicolumn checkboxGroupInput"), 
       tags$div(align = 'left', 
                class = 'multicol', 
                checkboxGroupInput(inputId  = 'numSelector', 
                                   label    = "Select the numbers:", 
                                   choices  = all_rows,
                                   selected = all_rows,
                                   inline   = FALSE))) 

# run the app
runApp(list(
            ui = fluidPage(tweaks,
                           fluidRow(column(width = 4, controls),
                                    column(width = 8, plotOutput("plot")))),
            server = function(input, output) { 
              plot_data <- reactive(input$numSelector)

              output$plot <- renderPlot(plot(x = plot_data(), 
                                             y = plot_data(), 
                                             pch = 6, 
                                             cex = 2, 
                                             xlim = c(1, 25), 
                                             ylim = c(1, 25)))
            }))

The checkboxGroupInput looks like this:

I cobbled this solution together with help form: CSS-Tricks and This Google Groups post.

Answer 2

I know this post is ancient, but... Inspired by Peter's answer, I dug in and fixed it to just tweak the existing checkboxGroupInput. The label for the group still goes above the group with my input, and the rest of the layout is the same.

Add this somewhere in your ui. For me this is a member of a tagList() in the sidebar (just to keep the code together), but it should work anywhere (as long as it's in a tagList() or I guess if it's the only element).

tags$head(
    tags$style(
      HTML(
        ".checkbox-inline { 
                    margin-left: 0px;
                    margin-right: 10px;
          }
         .checkbox-inline+.checkbox-inline {
                    margin-left: 0px;
                    margin-right: 10px;
          }
        "
      )
    ) 
  )

Answer 3

Another simple solution is just use shinyWidgets package (which have much more selections of styles) and prettyCheckbox which will have all checkboxes aligned on left edge, though the individual checkboxes are not aligned -- you may have to use css and the solution above if you really need that. On the other hand, with css you have to specify the column count and they will not wrap dynamically by window size.