Flexdashboard 宽表滚动到侧边栏答案

【问题标题】：Flexdashboard Wide Table Scrolls Into Side BarFlexdashboard 宽表滚动到侧边栏
【发布时间】：2020-07-26 12:20:02
【问题描述】：

我在 flexdashboard 中有一张宽表，通过 renderTable 显示。浏览器中有一个滚动条，但如果您将表格向右滚动，它会进入侧边栏。我怎样才能让它隐藏在侧边栏后面或让它包含在它的 div 单元格中？

这是 MWE：

---
title: 'TEST'
output: 
  flexdashboard::flex_dashboard:
runtime: shiny
---

```{r}
library(flexdashboard)
library(shinyWidgets)
library(shiny)
library(shinyjs)
library(stringi)
```

Inputs {.sidebar  data-width=250} 
-----------------------------------------------------------------------

```{r, echo = FALSE}
fileInput('file_input', tags$b('Choose CSV File'), accept=c('.csv'))
```

Column{data-width=300}
-----------------------------------------------------------------------
```{r, echo = FALSE}

set.seed(10)
x <- unique(stringi::stri_rand_strings(100, 3, '[A-Z]'))
x2 <- setNames(as.data.frame(matrix(sample(1:10, 10*length(x), T), ncol = length(x))), x)

renderTable(x2)
```

【问题讨论】：

我无法重现您的错误。你提供的代码对我来说很好用
您是否将栏滚动到右侧？ @Mr.Rlover 可以分享一下屏幕截图吗？我正在使用 0.5.1.1 版的 flexdashboard。

标签： r shiny flexdashboard

【解决方案1】：

我们可以使用带有 .sidenav 类的自定义 css 样式创建自己的侧边栏，因为与 .sidebar 不同，它会覆盖主体的内容。然后只需将表格的内容向右推，这样侧边栏就不会覆盖表格的前几列，我们使用 .table 类中的 margin-left 来做到这一点。在其他属性中添加背景颜色和宽度，使其看起来像您创建的侧边栏。

---
title: 'TEST'
output: 
  flexdashboard::flex_dashboard:
  runtime: shiny
---

```{r}
library(flexdashboard)
library(shinyWidgets)
library(shiny)
library(shinyjs)
library(stringi)
```

Inputs {.sidenav data-width=250} 
-----------------------------------------------------------------------

```{r, echo = FALSE}
fileInput('file_input', tags$b('Choose CSV File'), accept=c('.csv'))
```

Column{data-width=300}
-----------------------------------------------------------------------
```{r, echo = FALSE}

set.seed(10)
x <- unique(stringi::stri_rand_strings(100, 3, '[A-Z]'))
x2 <- setNames(as.data.frame(matrix(sample(1:10, 10*length(x), T), ncol = length(x))), x)

renderTable(x2)
```

<style type="text/css"> 
  .sidenav { 
    overflow-y: hidden;  
    height: 100%;
    width: 250px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #dde6f0;
    padding-top: 50px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .table {
    margin-left:250px;
  }

</style>

【讨论】：