CODEWITHSUNDEEP
rshinyshinydashboard
Komal Rathi
Komal Rathi

Reputation: 4274

R shiny Dashboard: How to add vertical scrollbar to dashboard sidebar?

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!

Upvotes: 9

Views: 12142

Answers (4)

Vasileios Tsiamis
Vasileios Tsiamis

Reputation: 11

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;}

Upvotes: 0

qfazille
qfazille

Reputation: 1671

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

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

Upvotes: 0

H. berg
H. berg

Reputation: 553

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

Upvotes: 0

prubin
prubin

Reputation: 376

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).

Upvotes: 17

Related Questions