在flexdashboard中为侧边栏添加滚动条

9
我正在使用Flexdashboard设计用户界面,一些文本输入框超出了常规浏览器窗口大小,我已在代码中添加了一行vertical_layout: scroll,但我想这似乎不够?我的问题是如何启用垂直滚动功能,如下所示的图片?非常感谢任何提示或指针。

enter image description here

以下是我的代码
---
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")


```

与其他一些flexdashboard问题不同,这个问题没有代码.....质量较低,请改进。 - IRTFM
1
@42- 这可能是一个非常简单的问题,只需要打开某个开关即可。如果您坚持的话,我也包含了我的代码。 - Bridgeport Byron Tucker
2个回答

13

这个问题已经在这里解决:https://github.com/rstudio/flexdashboard/issues/27

您可以通过从GitHub安装最新版本来使用修复版本:

devtools::install_github("rstudio/flexdashboard")

或者,您可以将以下 CSS 代码片段添加到您的仪表板中:

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

2
JJ再次挺身而出,解决了问题。 - IRTFM
@JJAllaire,哇,我刚刚不得不从devtools存储库重新安装我的flexdashboard包,然后它就可以工作了。 - Bridgeport Byron Tucker

0
我最近遇到了这个问题,但尝试了上面的CSS解决方案,却没有起作用。我在一个DT数据表中显示我的数据,所以我找到了这个使用scrollXscrollY的解决方案,在当前版本的Chrome、Firefox和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
)
)

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接