dateRangeInput in box obfuscates boxSidebar

[gacolitti]

If a dateRangeInput is included in a box with a sidebar, then the dateRangeInput is shown on top of the sidebar. I would expect the sidebar to be on top of everything.

Here is a reproducible example:

if (interactive()) {
  library(shiny)
  library(shinydashboard)
  library(shinydashboardPlus)
  
  shinyApp(
    ui = dashboardPage(
      header = dashboardHeader(),
      body = dashboardBody(
        box(
          title = "Update box sidebar", 
          closable = TRUE, 
          width = 12,
          height = "500px",
          solidHeader = FALSE, 
          collapsible = TRUE,
          actionButton("update", "Toggle card sidebar"),
          dateRangeInput(inputId = "date", "Date"),
          sidebar = boxSidebar(
            id = "mycardsidebar",
            p("Sidebar Content")
          )
        )
      ),
      sidebar = dashboardSidebar()
    ),
    server = function(input, output, session) {
      observe(print(input$mycardsidebar))
      
      observeEvent(input$update, {
        updateBoxSidebar("mycardsidebar")
      })
      
    }
  )
}

[gacolitti]

I fixed this issue by adjusting the z-index for the sidebar:

if (interactive()) {
  library(shiny)
  library(shinydashboard)
  library(shinydashboardPlus)
  
  shinyApp(
    ui = tagList(
      tags$style(HTML(".direct-chat-contacts {z-index: 99 !important}")),
      dashboardPage(
      header = dashboardHeader(),
      body = dashboardBody(
        box(
          title = "Update box sidebar", 
          closable = TRUE, 
          width = 12,
          height = "500px",
          solidHeader = FALSE, 
          collapsible = TRUE,
          actionButton("update", "Toggle card sidebar"),
          dateRangeInput(inputId = "date", "Date"),
          sidebar = boxSidebar(
            id = "mycardsidebar",
            p("Sidebar Content")
          )
        )
      ),
      sidebar = dashboardSidebar()
    )),
    server = function(input, output, session) {
      observe(print(input$mycardsidebar))
      
      observeEvent(input$update, {
        updateBoxSidebar("mycardsidebar")
      })
      
    }
  )
}