15

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

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)
    })
flamenco
  • 2,702
  • 5
  • 30
  • 46

3 Answers3

33

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:

enter image description here

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

Peter
  • 7,460
  • 2
  • 47
  • 68
  • 5
    Is there any possibility to have only label in the first row without any checkboxes, and checkboxes will be aligned from the second row onwards ? – SatishR Nov 02 '16 at 19:32
19

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;
          }
        "
      )
    ) 
  )
Jon Harmon
  • 803
  • 1
  • 9
  • 20
  • I'm not sure where to add this into the code in the answer. I've tried adding it in 3 different places, including as a list element in `tweaks`. – Eric Krantz Feb 10 '23 at 02:56
  • This solution works for me, but the 2nd, 3rd and 4th column of checkboxes still are off, and show squiggly. Not sure what I am doing wrong. – Gopala Mar 08 '23 at 22:57
2

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.

dracodoc
  • 2,603
  • 1
  • 23
  • 33
  • 2
    This solution does not create evenly spaced columns. – Peter Mueller Mar 21 '20 at 17:42
  • Yes. However with the css specified columns you cannot wrap them dynamically with resize. Which one is preferred will depend on use case. I kind of confused this question with another similar question where no good answer exist. I agree the css solution above is a good solution if you want all checkbox aligned. I edited the text to clarify it. – dracodoc Mar 22 '20 at 18:18