How to extend the background in a shiny dashboard

Question

Here is a small (silly) code of a shiny dashboard application:

    library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(uiOutput("choices")),
  dashboardBody()
)

server <- function(input,output) {
  output$choices <- renderUI(radioButtons("blabla", NULL, 1:100))
}

shinyApp(ui = ui, server = server)

When you run this code, you see that if you scroll down, the nice background on the right hand side suddenly switches to black. How do I make sure that the background stays nice and uniform throughout the entire page, even if a scroll down and use ui-elements?

Anders Ellern Bilgrau · Answer 1 · 2020-07-18T17:50:07.423

9

I know this is an old question, but I'm adding here for posterity. I did not find a fixed height to be satisfactory as it adds a permanent scrollbar.

Using .content-wrapper { overflow: auto; } seems to work as I expect. I.e.:

dashboardPage(
    dashboardHeader(),
    dashboardSidebar(
        # ...
    ),
    dashboardBody(

        # ...

        tags$head(tags$style(HTML('.content-wrapper { overflow: auto; }')))
    )
)

edited Jul 18 '20 at 17:50

answered Mar 13 '20 at 15:02

Anders Ellern Bilgrau

9,928
1
30
37

You're a lifesaver! – Christy S Apr 25 '22 at 16:49

score 3 · Accepted Answer · answered Jul 30 '18 at 11:12

Just overwrite fixed height to your .content-wrapper class.

library(shiny)
library(shinydashboard)

ui <- dashboardPage(

    dashboardHeader(),
    dashboardSidebar(
        tags$head(tags$style(HTML('.content-wrapper { height: 3000px !important;}'))),
        uiOutput("choices")),
    dashboardBody()
)

server <- function(input,output) {
    output$choices <- renderUI(radioButtons("blabla", NULL, 1:100))
}

shinyApp(ui = ui, server = server)

How to extend the background in a shiny dashboard

2 Answers2