Sidebar background color covers body background color when body height taller than screen height

[gdurif]

Here is a MWE with collapsed boxes that can be expanded (the issue remains with long non collapsible boxes, c.f. below):

library(shiny)
library(shinydashboard)
library(stringi)
library(stringr)

ui <- dashboardPage(
    dashboardHeader(title = "Test"),
    dashboardSidebar("Empty sidebar"),
    dashboardBody(
        box(
            title = "box 1", 
            width = 12, 
            collapsible = TRUE,
            collapsed = TRUE,
            str_c(stri_rand_lipsum(5), collapse = "\n")
        ),
        box(
            title = "box 2", 
            width = 12, 
            collapsible = TRUE,
            collapsed = TRUE, 
            str_c(stri_rand_lipsum(5), collapse = "\n")
        ),
        box(
            title = "box 3", 
            width = 12, 
            str_c(stri_rand_lipsum(5), collapse = "\n")
        )
    ),
    skin = "black"
)

server <- function(input, output) { }

shinyApp(ui, server)

With the following result at the bottom of the page when expanding collapsed boxes:

[gdurif]

With long content (static, not collapsible nor height varying), the part of the body that is outside the screen height is covered by the sidebar background.

Example:

library(shiny)
library(shinydashboard)
library(stringi)
library(stringr)

ui <- dashboardPage(
    dashboardHeader(title = "Test"),
    dashboardSidebar("Empty sidebar"),
    dashboardBody(
        box(
            title = "box 1", 
            width = 12,
            str_c(stri_rand_lipsum(5), collapse = "\n")
        ),
        box(
            title = "box 2", 
            width = 12,
            str_c(stri_rand_lipsum(5), collapse = "\n")
        ),
        box(
            title = "box 3", 
            width = 12, 
            str_c(stri_rand_lipsum(5), collapse = "\n")
        ),
        box(
            title = "box 4", 
            width = 12, 
            str_c(stri_rand_lipsum(5), collapse = "\n")
        ),
        box(
            title = "box 5", 
            width = 12, 
            str_c(stri_rand_lipsum(5), collapse = "\n")
        )
    ),
    skin = "black"
)

server <- function(input, output) { }

shinyApp(ui, server)

and result:

[ismirsehregal]

You can wrap the boxes in a fluidRow to avoid the above issue:

library(shiny)
library(shinydashboard)
library(stringi)
library(stringr)

ui <- dashboardPage(
  dashboardHeader(title = "Test"),
  dashboardSidebar("Empty sidebar"),
  dashboardBody(
    fluidRow(
    box(
      title = "box 1", 
      width = 12,
      str_c(stri_rand_lipsum(5), collapse = "\n")
    ),
    box(
      title = "box 2", 
      width = 12,
      str_c(stri_rand_lipsum(5), collapse = "\n")
    ),
    box(
      title = "box 3", 
      width = 12, 
      str_c(stri_rand_lipsum(5), collapse = "\n")
    ),
    box(
      title = "box 4", 
      width = 12, 
      str_c(stri_rand_lipsum(5), collapse = "\n")
    ),
    box(
      title = "box 5", 
      width = 12, 
      str_c(stri_rand_lipsum(5), collapse = "\n")
    ))
  ),
  skin = "black"
)

server <- function(input, output) { }

shinyApp(ui, server)

[gdurif]

@ismirsehregal thank you very much