gpt4 book ai didi

r - Flexdashboard 宽表滚动到侧栏

转载 作者:行者123 更新时间:2023-12-04 12:24:31 25 4
gpt4 key购买 nike

我有一张宽 table 弹性仪表板 通过 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)
```

enter image description here

最佳答案

我们可以使用自定义 css 样式和 .sidenav 类创建我们自己的侧边栏,因为这会覆盖主体的内容,与 .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>


enter image description here

关于r - Flexdashboard 宽表滚动到侧栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61196391/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com