Shiny Date Picker opening below the menu bar

Question

I've made a app where you need to choose a date. When you use the date picker it will show up behind the menu bar, and hide important information.

You can see the top line of the date picker and can see which month your in and browse fast between months.

Now, if the date is placed a bit lower, the menu-bar will hide the top of the date picker and show up such as this:

How can I avoid this? I've added code that replicates the error with the second date chooser below

# Setup 

library(shiny)
library(dplyr)
library(shinydashboard)


ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  ## Sidebar content
  dashboardSidebar(
    sidebarMenu(
      menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
      menuItem("Widgets", tabName = "widgets", icon = icon("th")),
      dateRangeInput('dateRange1',
                     label = 'Period 1, Current Month',
                     start = Sys.Date(), end = Sys.Date() + 9,
                     separator = ";", 
                     weekstart = 1), # This opens correct
      dateRangeInput('dateRange1',
                     label = 'Period 1, Current Month',
                     start = Sys.Date(), end = Sys.Date() + 9,
                     separator = ";", 
                     weekstart = 1) # This does NOT open correct!
    )
  ),
  dashboardBody(
    tabItems(
      # First tab content
      tabItem(tabName = "dashboard",
              fluidRow(
                box(plotOutput("plot1", height = 250)),

                box(
                  title = "Controls",
                  sliderInput("slider", "Number of observations:", 1, 100, 50)
                )
              )
      ),

      # Second tab content
      tabItem(tabName = "widgets",
              h2("Widgets tab content")
      )
    )
  )
)

server <- function(input, output) {
  set.seed(122)
  histdata <- rnorm(500)

  output$plot1 <- renderPlot({
    data <- histdata[seq_len(input$slider)]
    hist(data)
  })
}

shinyApp(ui, server)

Answer 1

The z-index of the div holding the data picker is set to 820 using inline CSS. This does not seem enough to put it above everything else so you could increase it using a style tag.

You could for example add:

tags$style(HTML(".datepicker {z-index:99999 !important;}"))

after the dateRangeInput.