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?

Answer 1

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; } .content-wrapper { overflow: auto; } seems to work as I expect. Ie:

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

        # ...

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

Answer 2

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)