dateInput hidden by rhandsontable widget headers

[jrowen]

The dateInput selector is being covered up by the rhandsontable headers in the example below. I'm not sure if an update is needed in shiny or in rhandsontable.

library(shiny)
library(rhandsontable)

ui = shinyUI(
  tagList(
    fluidPage(
      titlePanel("Test", windowTitle = "Test"),
      fluidRow(
        column(2, dateInput("dt", "Date", Sys.Date()))
      ),
      fluidRow(
        column(8, rHandsontableOutput("hot"))
      )
    )
  )
)

server = function(input, output) {
  output$hot <- renderRHandsontable({
    DF = data.frame(val = 1:10, bool = TRUE, nm = LETTERS[1:10],
                    dt = seq(from = Sys.Date(), by = "days", length.out = 10),
                    stringsAsFactors = F)

    rhandsontable(DF)
  })
}

shinyApp(ui = ui, server = server)

[wch]

I'd suggest filing an issue with rhandsontable.

[jrowen]

That would be me. I think I found the problem. The dateInput generates a datepicker with a z-index of 10, but handsontable uses z-index values starting with 100. Do I need to create a css override in rhandsontable to specify a larger z-index for datepicker or would it be better to update shiny. I see that shiny-progress-container uses a z-index of 2000, so using a larger value wouldn't be unprecedented.

[shrektan]

The dateInput has the same issue when used in a Modal. I guess the reason is the same.

发自网易邮箱大师
在2015年08月05日 03:40，Jonathan Owen 写道:

That would be me. I think I found the problem. The dateInput generates a datepicker with a z-index of 10, but handsontable uses z-index values starting with 100. Do I need to create a css override in rhandsontable to specify a larger z-index for datepicker or would it be better to update shiny. I see that shiny-progress-container uses a z-index of 2000, so using a larger value wouldn't be unprecedented.

—
Reply to this email directly or view it on GitHub.

[wch]

This appears to work fine with the latest version of Shiny and rhandsontable.

[jrowen]

I added the code below to the rhandsontable css, but let me know if let need a different solution.

.datepicker {
  z-index: 1000 !important;
}