Scrollbar for the Shiny sidebar

Stéphane Laurent

20 seconds ago

[This article was first published on Saturn Elephant, and kindly contributed to R-bloggers]. (You can report issue about the content on this page here)

Want to share your content on R-bloggers? click here if you have a blog, or here if you don't.

It is easy to have a scrollbar for the sidebar of a Shiny app: one just has to use the CSS height: 90vh; overflow-y: auto;:

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  titlePanel("Sidebar with scrollbar"),
  sidebarLayout(
    sidebarPanel(
      style = "height: 90vh; overflow-y: auto;", 
      sliderInput("bins", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      dropdown(
        tags$h1("A very large dropdown"),
        status = "danger",
        size   = "lg",
        label  = "Open me!",
        width  = "500px"
      ),
      br(),
      sliderInput("bins2", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins3", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins4", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins5", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins6", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins7", "Number of bins:", min = 1, max = 50, value = 30),
    ),
    
    mainPanel(
      plotOutput("distPlot")
    )
    
  )
)

server <- function(input, output) {
  output[["distPlot"]] <- renderPlot({
    x    <- faithful[, 2] 
    bins <- seq(min(x), max(x), length.out = input[["bins"]] + 1)
    hist(x, breaks = bins, col = "darkred", border = "white")
  })
}

shinyApp(ui = ui, server = server)

But, as you can see, there is an issue with the shinyWidgets::dropdown: when one opens it, the part outside the sidebar is hidden. Here is a JavaScript solution for this issue:

library(shiny)
library(shinyWidgets)

js <- '
$(document).ready(function(){
  $("[id^=sw-content-]").on("shown", function(){
    $(".sidebar").css({"overflow-y": "visible"});
  }).on("hidden", function(){
    $(".sidebar").css({"overflow-y": "auto"});
  });
});
'

ui <- fluidPage(
  tags$head(tags$script(HTML(js))),
  titlePanel("Sidebar with scrollbar"),
  sidebarLayout(
    sidebarPanel(
      class = "sidebar",
      style = "height: 90vh; overflow-y: auto;", 
      sliderInput("bins", "Number of bins:", min = 1, max = 50, value = 30),
      ......

I find the native HTML scrollbars a bit ugly. It is possible to customize them: Styling scrollbars in CSS.

To leave a comment for the author, please follow the link and comment on their blog: Saturn Elephant.

R-bloggers.com offers daily e-mail updates about R news and tutorials about learning R and many other topics. Click here if you're looking to post or find an R/data-science job.

Want to share your content on R-bloggers? click here if you have a blog, or here if you don't.