R Shiny scrolling sidebar/overflow

Question

I am building a shiny app that generally fits on a small screen. However, the app has many selectors and filters in the sidebar menu. So many that the sidebar is longer than the main panel and doesn't fully fit on screen. I'd like to make the sidebar scrollable so that everything is visible within a single view. I feel like having the sidebar lengthen the page looks very unprofessional.

Here's a reproducible example (image attached). Of course, my sidebar has different selectors in it, not the same one repeated over and over like in the example, but the code below gets the point across. How would I make the side bar scroll? I haven't found a good solution online yet. Thanks in advance.

 ## app.R ##
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50)
  ),
  dashboardBody(
    # Boxes need to be put in a row (or column)
    fluidRow(
      box(plotOutput("plot1", height = 250)),
      
      box(
        title = "Controls",
        sliderInput("slider", "Number of observations:", 1, 100, 50)
      )
    )
  )
)

server <- function(input, output) {
  set.seed(122)
  histdata <- rnorm(500)
  
  output$plot1 <- renderPlot({
    data <- histdata[seq_len(input$slider)]
    hist(data)
  })
}

shinyApp(ui, server)

Answer 1

You can set CSS styles in tags$style . We need to modify the element with id = #sidebarItemExpanded .

Set overflow: auto; and max-height: 100vh; , or something along those lines:

dashboardSidebar(
    tags$style(
      "#sidebarItemExpanded {
            overflow: auto;
            max-height: 100vh;
        }"
    ),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50)
)

You can read more about the overflow property here .

Answer 2

Thanks again to heds1 for the answer earlier. I noticed that the answer provided did create a scrollbar on the right side of the app that I didn't intend to be there. I then modified the answer heds1 gave but made a small tweak to account for the 50 pixel header in shiny. Because of the header, the height of the scrollbar should be max height minus 50px. The below code is what gets that done.

  dashboardSidebar(
    tags$style(
      "#sidebarItemExpanded {
            overflow: auto;
            height: calc(100vh - 50px) !important;
        }"
    ),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50)
  ),