Search code examples
rshinyflexdashboard

Shiny dashboard Layout: how to make side bar align with extra long body content?

I am using the flex dashboard side bar layout:

---
output: 
  flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
runtime: shiny
---

```{r global, include=FALSE, echo=FALSE}

library(shiny)
library(shinydashboard)
library(DT)

data <- data.frame('col1'= rnorm(1000))
```

```{r, echo = FALSE}
shinyApp(
ui <- dashboardPage(
       dashboardHeader(title = 'Test Dashboard'),
        dashboardSidebar(

    sliderInput("fy", label = "Since",
        min = 2015, max = 2030, value = 1, step = 1),

    sliderInput('minCount', label = 'Minimum Count Frequency:', 
  min = 1, max = 20, value = 1, step = 1)

 ),
 dashboardBody(
   column(12,
  dataTableOutput('table')
 )
 )
 ),
  server <- function(input, output) {
   output$table <- renderDataTable(
     datatable(data, options = list(pageLength  = 100))
    )
   }
  ) 

```

I am wondering how do I get side bar extend along with the extra long table, meaning avoiding the ugly edge at the bottom: enter image description here

Any help appreciated! Should be an easy fix, but just couldn't figure out the solution myself...

Solution

  • You can use the CSS property overflow to make it work:

    dashboardBody(
  tags$head(
    tags$style(
      HTML('.content-wrapper {
               overflow: auto;
           }'
      )
    )
  ),
  column(12,
         dataTableOutput('table')
  )
)