search

rstudio / shinydashboard

Shiny Dashboarding framework
https://rstudio.github.io/shinydashboard/
Other
893 stars 298 forks source link

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

Open gdurif opened 4 years ago

gdurif commented 4 years ago

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:

shiny_issue

gdurif commented 4 years ago

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

ismirsehregal commented 4 years ago

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 commented 4 years ago

@ismirsehregal thank you very much