cssrshinycss-multicolumn-layout

Specify the padding between rows in a checkboxGroupInput

This is my shiny application:

ui.R

# 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    = NULL,
                                   choices  = all_rows,
                                   selected = NULL,
                                   inline   = FALSE))
       ) 


ui <- fluidPage(
                tags$style(type='text/css',"
                label {font-size: 10px; }           
                .form-group {margin-top: 5px; margin-bottom: 5px;}
                .nav-tabs {font-family:'arial';font-size:20px}
                input[type=checkbox] {transform: scale(1);margin-top:1px;}
                .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;}
                .btn {display:block;height: 60px;width: 40px;border-radius: 50%;} 
                #modules .checkbox label span {font-weight:bold;}
                #label {color:#fff;}
                "),                
                fluidRow(column(width = 12, controls),
                         column(width = 12, plotOutput("plot")))
                 # sidebarLayout(
                 #   position = "left",
                 #   sidebarPanel(controls),
                 #   mainPanel()
                 # )                
                )

server.R

server = function(input, output) { 
}

This is how it looks like:

enter image description here

I will include more than 100 checkboxes with large labels and I need to remove the spaces between rows (the yellow spaces). Can you suggest what to change?

Thanks

Solution

  • Just add .checkbox, .radio {margin: 0px} to your tags$style:

    tags$style(
    type = 'text/css',
    "label {font-size: 10px; }
    .form-group {margin-top: 5px; margin-bottom: 5px;}
    .nav-tabs {font-family:'arial';font-size:20px}
    input[type=checkbox] {transform: scale(1);margin-top:1px;}
    .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;
    }
    .btn {display:block;height: 60px;width: 40px;border-radius: 50%;} 
    #modules .checkbox label span {font-weight:bold;}
    #label {color:#fff;}
    .checkbox, .radio {margin: 0px}
    "
  )