9

I have a couple of questions regarding R shiny Dashboard.

ui.R

library(shinydashboard)
library(shiny)

dashboardPage(
dashboardHeader(title = 'Test Interface'),
dashboardSidebar(width = 600,

               h3('-------Input Data-------'),
               fluidRow(
                 column(6, div(style = "height:10px"), fileInput(inputId = 'FileInput', label = 'Upload Input:', accept = c('csv','tsv','txt'))),
                 column(2, div(style = "height:3px"), checkboxInput(inputId = 'header', label = 'Header', value = FALSE)),
                 column(2, div(style = "height:12px"), radioButtons(inputId = 'sep', label = 'Separator', choices = c(comma=',',tab="\t",space=' '), selected = ","),offset = 1)
               ),
               fluidRow(column(6, div(style = "height:1px"), fileInput(inputId = 'FileInput1', label = 'Upload Second Input:'))),
               br(),
               h3('-------Select Foreground-------'),
               fluidRow(
                 column(5, div(style = "height:17px"), radioButtons(inputId = 'cutoff', label = 'Selection', choices = c('Up'='pos','Down'='neg','Both'='both'))),
                 br(),
                 column(3, div(style = "height:1px"), textInput(inputId = 'fc', label = "Fold Change", value = '0')),
                 column(3, div(style = "height:1px; margin-left:10cm"), height = 6,textInput(inputId = 'pvalue', label = "Adj. Pvalue",value = '0.05'))
               ),
               fluidRow(column(2, h1(" "), actionButton(inputId = 'select', label = "Select Data"))),
               fluidRow(column(5, div(style = "height:25px;font-color:blue"), downloadButton('download', 'Download Plot')))),
               dashboardBody(
                 tabsetPanel(type="tabs", id = "tabvalue",
                             tabPanel(title = "Input Table", value = 'tab1', DT::dataTableOutput('table')),
                             tabPanel(title = "Plot", value = 'tab7', plotOutput('plot',width = 800,height = 800)))))

server.R

library(shiny)

shinyServer(function(input, output, session){
})

I couldn't figure out how to add a vertical scroll bar to the dashboardSidebar. In my actual app, the last elements are not visible when I run the app.

Thanks!

4 Answers 4

17

I ran into this and came up with the following hack (and I do mean hack).

shinyDashboard(
  tags$head(
    tags$style(HTML(".sidebar {
                      height: 90vh; overflow-y: auto;
                    }"
               ) # close HTML       
    )            # close tags$style
  ),             # close tags#Head
# ...

The 90vh sets the sidebar height at 90% of the viewport height. You may want to adjust this to taste. Too large a percentage and some of the sidebar still drops below the horizon; too small a percentage and the sidebar ends noticeably before the main body (with the scrollbar appearing prematurely).

3
  • 1
    css isn't a hack :)
    – geotheory
    Commented Sep 8, 2017 at 11:45
  • 14
    It is when I'm the one writing it. ;-)
    – prubin
    Commented Sep 8, 2017 at 22:48
  • This also works for the controlbar using .control-sidebar i.o. .sidebar
    – H. berg
    Commented Apr 20, 2023 at 19:59
0

This also works for the controlbar using .control-sidebar i.o. .sidebar

0

You can include the css into the dashboardBody directly using the style argument.

body <- dashboardBody(
  style = "height: 90vh; overflow-y: auto;",
  ...
  ...
)
0

Extending and generalizing prubin's solution to any content inside the sidebar the solution could be also:

shinydashboard::dashboardSidebar(
  shiny::tags$style(
    shiny::HTML(".sidebar {height: calc(100vh - 50px); overflow-y: scroll; scrollbar-width: none;}")
  ),
  # ...
  # ...
  # ...
)

Explanation:

height: calc(100vh - 50px):

Set the height of the sidebar at 100% of the viewport height minus 50px that correspond to the default height of the navigation bar. This can guarantee that all the content (which can also be dynamic) is visible and the scrollbar fits exactly to the sidebar height.

overflow-y: scroll;

The scrollbar on y axis is always there, despite the contents height.

scrollbar-width: none;

This is completely optional. I personally like to hide the scrollbar and scroll with the mouse scroll wheel, and this is what this property does. Alternative values are 'auto' and 'thin'. Probably this won't work for Opera. A working solution for Opera (but not for Firefox) is the ::-webkit-scrollbar pseudo-element. To have the same result the following can be used:

.sidebar::-webkit-scrollbar {width: 0px;}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.