Flexdashboard 宽 Table 滚动到侧边栏
Flexdashboard Wide Table Scrolls Into Side Bar
我在通过 renderTable
显示的 flexdashboard 中有一个宽 table。浏览器中有一个滚动条,但如果您将 table 滚动到右侧,它会进入侧边栏。我怎样才能让它隐藏在侧边栏后面或让它包含在 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)
```
我们可以使用带有 .sidenav class 的自定义 css 样式来创建我们自己的侧边栏,因为这会覆盖主体的内容,这与 .sidebar 不同。然后只需将 table 的内容向右推,这样侧边栏就不会覆盖 table 的前几列,我们使用 .table 中的 margin-left 来做到这一点class。在其他属性中添加背景颜色和宽度,使其看起来像您创建的边栏。
---
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>
我在通过 renderTable
显示的 flexdashboard 中有一个宽 table。浏览器中有一个滚动条,但如果您将 table 滚动到右侧,它会进入侧边栏。我怎样才能让它隐藏在侧边栏后面或让它包含在 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)
```
我们可以使用带有 .sidenav class 的自定义 css 样式来创建我们自己的侧边栏,因为这会覆盖主体的内容,这与 .sidebar 不同。然后只需将 table 的内容向右推,这样侧边栏就不会覆盖 table 的前几列,我们使用 .table 中的 margin-left 来做到这一点class。在其他属性中添加背景颜色和宽度,使其看起来像您创建的边栏。
---
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>