Increase length of the shiny dashboard sidebar

Question

Since, my original dataset is very huge I recreated my problem using the iris dataset. I added a column 'new_var' which has descriptions of flowers. The trouble I have is when I select multiple inputs(> 3) from the drop down menu, the length of the sidebar doesn't get adjusted to show remaining values from the drop down.

I have tried increasing the length of the sidebar but it doesn't work. I tried wrapping the dashboardSidebar with fluidPage, it doesn't work either.

What I'm really looking for is if the length of the sidebar can adjust dynamically so I can scroll to see all the values or provide a vertical scroll bar. Thanks

library(datasets)
library(shiny)
library(shinydashboard)
library(DT)

data(iris)
x <- c("Small flowers","Flowers (or heads) borne singly on isolated stems or arising individually from leaf axils. Not part of a larger group.", "A simple, indeterminate inflorescence consisting of stalked flowers attached to a central stem and forming a more or less elongated cluster. The stalk of a flower is termed a pedicle and pedicled flowers are implied by the term raceme when used alone in the specific sense. ", "An indeterminate inflorescence consisting of stalkless flowers attached to a central stem, generally forming a highly elongated cluster. A raceme of stalkless flowers. ", "An indeterminate inflorescence forming a convex or flat-topped cluster, essentially a contracted raceme. Typically flowers arise from a central axis on stalks (pedicles) of different lengths that bring them all to near the same height. The term is also applied to racemes of similar shape with branching pedicles. The outermost flowers generally open first. ")
iris$new_var <- rep(x, each = 30)


ui <- 
  dashboardPage(
    dashboardHeader(title = strong("DATA LOADER"),titleWidth = 240),
    dashboardSidebar(

      sidebarMenu(
        selectizeInput("newvar", "Choose type of flower:", choices = sort(unique(iris$new_var)), multiple = TRUE)

      )
    ),
    dashboardBody(
      fluidRow(
        dataTableOutput("df"),
        br()
      )))

server <- function(input, output){
  output$df <- renderDataTable(reactive({
    iris[iris$new_var %in% input$newvar, ]
  })())
}
shinyApp(ui, server)

Answer 1

There is a css style definition, that keeps the downwards overlapping part of the sidebar invisible. You just have to override that definition in order for the page to be scrollable.

The "wrapper" around all the dashboard elements has overflow: hidden !important, apparently to let it look more like a real dashboard than a webpage. Strange enough, since the dashboardBody is scrollable itself, this only affects the sidebar visibility.

I wrote the style definition inside a head tag. This way it does not matter where in the ui this definition is placed, because it is going to be appended to the HTML head.

If this happens not to solve your problem, please comment.

Code below:

library(datasets)
library(shiny)
library(shinydashboard)
library(DT)

data(iris)
x <- c("Small flowers", "Flowers (or heads) borne singly on isolated stems or arising individually from leaf axils. Not part of a larger group.", "A simple, indeterminate inflorescence consisting of stalked flowers attached to a central stem and forming a more or less elongated cluster. The stalk of a flower is termed a pedicle and pedicled flowers are implied by the term raceme when used alone in the specific sense. ", "An indeterminate inflorescence consisting of stalkless flowers attached to a central stem, generally forming a highly elongated cluster. A raceme of stalkless flowers. ", "An indeterminate inflorescence forming a convex or flat-topped cluster, essentially a contracted raceme. Typically flowers arise from a central axis on stalks (pedicles) of different lengths that bring them all to near the same height. The term is also applied to racemes of similar shape with branching pedicles. The outermost flowers generally open first. ")
iris$new_var <- rep(x, each = 30)

ui <- 
  dashboardPage(
    dashboardHeader(title = strong("DATA LOADER"),titleWidth = 240),
    dashboardSidebar(
      tags$head(tags$style(".wrapper {overflow: visible !important;}")),
      sidebarMenu(
        selectizeInput("newvar", "Choose type of flower:", choices = sort(unique(iris$new_var)), multiple = TRUE)

      )
    ),
    dashboardBody(
      fluidRow(
        dataTableOutput("df"),
        br()
      )))

server <- function(input, output){
  output$df <- renderDataTable(reactive({
    iris[iris$new_var %in% input$newvar, ]
  })())
}
shinyApp(ui, server)