Flexdashboard Широкие настольные свитки в боковой панели - PullRequest
Новая
       70

Flexdashboard Широкие настольные свитки в боковой панели

2 голосов
/ 13 апреля 2020

У меня есть широкая таблица в flexdashboard , которая отображается через renderTable. В браузере есть полоса прокрутки, но если вы прокрутите таблицу вправо, она перейдет на боковую панель. Как я могу сделать это go за боковой панелью невидимым или оставить его в своей ячейке 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

1 Ответ

2 голосов
/ 14 апреля 2020

Мы можем создать нашу собственную боковую панель, используя собственный стиль css с классом .sidenav, так как он переходит на содержимое основного тела, в отличие от .sidebar. Затем просто выведите pu sh содержимое таблицы справа, чтобы боковая панель не закрывала первые несколько столбцов таблицы, мы делаем это с помощью margin-left в классе .table. Добавьте цвет и ширину фона среди других свойств, чтобы он выглядел как созданная вами боковая панель. 

---
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

...