Adding scroll to sidebar in flexdashboard

Question

I am designing a UI using Flexdashboard and some of the textinput boxes are going beyond the regular browser window, I have added a line vertical_layout: scroll in my code but I am guessing that is not enough ? So my question is how do I enable vertical scrolling feature as shown in this image below. ? Any tips or pointers are much appreciated.

Here's my code below

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: scroll
    smooth_scroll: true
    runtime: shiny
---

```{r setup, include=FALSE}
library(flexdashboard)
```

     Inputs {.sidebar}
-----------------------------------------------------------------------

  ```{r}
library(shiny)
library(shinyjs)


shinyjs::useShinyjs()
#tags$hr(),
shinyjs::disabled(textInput("id", "Id", "0"))
textInput("X1", "X1", "")
textInput("X2", "X2", "")
textInput("X3", "X3", "")
textInput("X4", "X4", "")
textInput("X5", "X5", "")
textInput("X6", "X6", "")
textInput("X7", "X7", "")
textInput("X8", "X8", "")
textInput("X9", "X9", "")
textInput("X10", "X10", "")
textInput("X11", "X11", "")
textInput("X12", "X12", "")

textInput("X13", "X13", "")
textInput("X14", "X14", "")
textInput("X15", "X15", "")
textInput("X16", "X16", "")

checkboxInput("X17", "X17", FALSE)


#action buttons
actionButton("submit", "Submit Changes")


```

Unlike some of the other flexdashboard questions, this one has no code..... low quality Q. Please improve. — IRTFM, May 22 '16 at 00:28
@42- This is probably a very simple thing, some switch that I need to turn on somewhere if you insist I have included my code as well. — Bridgeport Byron Tucker, May 22 '16 at 02:27

score 13 · Accepted Answer · edited Jul 13 '16 at 07:53

13

This issue has been resolved here: https://github.com/rstudio/flexdashboard/issues/27

You can use a version with the fix by installing the latest version from GitHub:

devtools::install_github("rstudio/flexdashboard")

Alternatively, you could add this snippet of CSS to your dashboard:

<style type="text/css"> .sidebar { overflow: auto; } </style>

edited Jul 13 '16 at 07:53

nacnudus

6,328
5
33
47

answered May 22 '16 at 13:19

JJ Allaire

556
3
3

2

JJ to the rescue yet again. – IRTFM May 22 '16 at 17:22
@JJAllaire , wow, i jut had to reinstall my flexdashboard package from the devtools repository and it worked. – Bridgeport Byron Tucker May 22 '16 at 17:50

score 0 · Answer 2 · answered Oct 19 '18 at 23:49

I had this problem recently but tried the CSS solution above and it did not work. I was displaying my data in a DT datatable, so I found this solution with scrollX and scrollY that works well across current Chrome, Firefox and IE:

library(DT)

DT::renderDataTable({
datatable(display.data(), style='bootstrap',
  class='table-condensed', 
  editable=TRUE, rownames=FALSE, extensions = 'Buttons',
  options = list(
    scrollX = '400px', scrollY='360px',
    searchHighlight = TRUE,
    columnDefs = list(list(width='50px',targets=c(0:9))),
    order=list(0, 'asc'),
    pageLength=10
)
)

Adding scroll to sidebar in flexdashboard

2 Answers2