How to force checkboxGroupInput elements inside a box

Question

I have a reactive checkboxGroupInput taking as values the column names from a user-uploaded inputfile. The input file can sometimes have more than a hundred columns, so I have used this answer to align the choices into multiple columns. It works nicely most of the time, but sometimes the column names are very large, so the labels fall outside the box:

Any idea how can I overcome this issue?

I have prepared a sample code using mtcars dataset (and row.names instead of colnames just for the sake of the example).

library(shiny)
library(shinydashboard)

sidebar <- dashboardSidebar(
  sidebarMenu(
    busyIndicator(text="Loading..."),
    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;
             }
             ')
        )
        ),  

    menuItem("Plot result", tabName = "scatterplot", icon = icon("area-chart"))
    )
)

body <- dashboardBody(
  tabItems(
    tabItem(tabName = "scatterplot", 
              box(
                title="CHECKBOX",solidHeader = TRUE, status="primary",
                tags$div(align = 'left', 
                         class = 'multicol', uiOutput("covarselect")),
                width=2
              )
            )
    )
)

ui=dashboardPage(
  dashboardHeader(title = "analysis"),
  sidebar,
  body
)

server <- function(input, output,session) {
  output$covarselect <- renderUI({
    mtcars <- datasets::mtcars
    row.names(mtcars) <- gsub(" ","",row.names(mtcars))
    checkboxGroupInput("carselect","Select any that apply",as.list(row.names(mtcars)),inline=F)
  })
}

shinyApp(ui = ui, server = server)

EDIT

As per the suggestion of Nikhil Nanjappa I have tried reproducing the issue in a fiddle, although I did not succeed in reproducing the box as in shinydashboard

This seems an HTML + CSS issue, can you post them as well here. Maybe create a Fiddle with the generated HTML. — Nikhil Nanjappa, Jun 13 '17 at 14:52
Thank you @Nikhil I am not familiar with html coding in general, but I have tried presenting the code in a fiddle (added it to my OP) — Bea, Jun 13 '17 at 15:31
You need to look into adding a column break - Similar to [this](https://stackoverflow.com/questions/7785374/how-to-prevent-column-break-within-an-element) and [this](https://stackoverflow.com/questions/5314726/css-multi-column-layout-of-list-items-doesnt-align-properly-in-chrome) but adding instead, not avoiding — Nikhil Nanjappa, Jun 14 '17 at 10:27

score 0 · Answer 1 · answered Jun 29 '22 at 20:45

Add overflow-y and height style attributes, where the grouped checkboxes are inside a division <div>, this is similar to your design.

UI:

fluidRow(
 box(
     width = 2,
     title = "Grouped Checkboxes",
     div(id = 'groupchk' style = 'height: 400px; overflow-y: scroll;', 
         checkboxGroupInput("chkbxgrp", "Choose:", choices = many_choices)
    )
),

Furthermore, let's say the grouped checkbox is next to a box with a plot in your fluidRow. You'd like to match the relative height of the plot. You would remove the style from your division groupchk, and we can set the height dynamically with shinyjs::runjs function.

Do this on some reactive, observe, or renderUI function:

First obtain the height of the element you want to match, then assign it and set the overflow-y as well. To make shinyjs work, you must useShinyjs() shinyjs::

SERVER:

runjs("var newHeight = $('#plot').height(); 
       $('#groupchk').height(newHeight); 
       $('#groupchk').css('overflow-y','scroll')")

How to force checkboxGroupInput elements inside a box

1 Answers1