sidebarUserPanel() background will be override by leafletfix.css:8 when use leaflet package together with shinydashboard.

[gyang274]

I find that leafletfix.css:8 in leaflet overrides shinydashboard css, and makes the sidebarUserPanel() having grey box prominent from the black background. In my opinion, this is unconformable aesthetically. I fixed it by adding style="background-color:transparent;" in div(class = "user-panel", ..., div(class = "pull-left info", ...)) in sidebarUserPanel() source code.

An example of the issue:

## app.R ##
library(shiny)
library(shinydashboard)

library(leaflet)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(
    sidebarUserPanel(name = "Ex Machina", subtitle = "Hello World!")
  ),
  dashboardBody(
    leaflet() %>% addTiles()
  )
)

server <- function(input, output) { }

shinyApp(ui, server)

Thank you!

[Kbrother1024]

Thanks! I'm having the same issue with you! Thanks for sharing

[ShinyFabio]

Hi I'm facing the same problem. How can I add that div options inside my code?

[IguanMat]

Hi I'm facing the same problem. How can I add that div options inside my code?

I would like to know the same thing

[gadenbuie]

I opened an issue in leaflet, since we should be able to fix this in leaflet's CSS rules. But for now you can add the following line to your dashboardBody() (anywhere you want) to restore the correct user panel styles:

tags$style(HTML(".user-panel > .info { background: unset; }"))

Here's the original app with the fix applied:

## app.R ##
library(shiny)
library(shinydashboard)

library(leaflet)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(
    sidebarUserPanel(name = "Ex Machina", subtitle = "Hello World!")
  ),
  dashboardBody(
    leaflet() %>% addTiles(),
    tags$style(HTML(".user-panel > .info { background: unset; }"))
  )
)

server <- function(input, output) { }

shinyApp(ui, server)

Now that we've documented the work-around here, I'm going to close this issue in favor of the leaflet-specific issue. Thanks to @gyang274 for reporting the issue!