Part of dateRangeInput ui gets hidden under the shiny dashboard header

Question

Is there a way to always make the ui of dateRangeInput fully visible? Minimising the window and clicking on the date, this happens:

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(
    sidebarMenu(
      menuItem("Home", tabName = "Home")
    )
  ),
  dashboardBody(
    tabItems(
      tabItem(tabName = "Home",
        fluidRow(
          br(),
          br(),
          br(),
          br(),
          br(),
          br(),
          box(
            dateRangeInput("daterange", "Date range:", start = "2001-01-01", end = "2010-12-31"),
            title="Select Dates", solidHeader=T, status="primary",width=6,height=250)
        )
      )
    )
  )
)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

Answer 1

You can use css to make the z-index of .dropdown-menu more than that of dashboard header using the following tag:

tags$div(tags$style(HTML( ".dropdown-menu{z-index:10000 !important;}")))

In your apps ui it would be as follows:

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(
    sidebarMenu(
      menuItem("Home", tabName = "Home")
    )
  ),
  dashboardBody(

    tags$div(tags$style(HTML( ".dropdown-menu{z-index:10000 !important;}"))),

    tabItems(
      tabItem(tabName = "Home",
              fluidRow(
                br(),
                br(),
                br(),
                br(),
                br(),
                br(),
                box(
                  dateRangeInput("daterange", "Date range:", start = "2001-01-01", end = "2010-12-31"),
                  title="Select Dates", solidHeader=T, status="primary",width=6,height=250)
              )
      )
    )
  )
)

You would get something like this:

Hope it helps!