Flexdashboard Wide Table Scrolls Into Side Bar

Question

I have a wide table in a flexdashboard that displays via renderTable. There is a scroll bar in the browser but if you scroll the table to the right it goes into the sidebar. How can I make it go behind the sidebar invisibly or keep it contained in its div cell?

Here is the 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)
```

I am unable to reproduce your error. The code you have supplied works fine for me — Mr.Rlover, Apr 13 '20 at 21:25
Did you scroll the bar to the right? @Mr.Rlover can you share a screen shot? I'm using version 0.5.1.1 of flexdashboard. — Tyler Rinker, Apr 13 '20 at 22:20

score 6 · Accepted Answer · answered Apr 14 '20 at 07:33

We can create our own sidebar using custom css styling with the .sidenav class, since this goes over the content of the main body, unlike .sidebar. Then simply push the content of the table to the right so that the sidebar doesn't cover the first few columns of the table, we do this using margin-left in the .table class. Add background colour and width among other properties to make it look like the sidebar you created.

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

Flexdashboard Wide Table Scrolls Into Side Bar

1 Answers1