dateRangeInput ui的一部分隐藏在闪亮的仪表板标题下

Question

有没有办法让dateRangeInput的ui完全可见？  最小化窗口并单击日期，会发生以下情况：

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

您可以使用css使用以下标记使.dropdown-menu的z-index比仪表板标题的z-index更多：

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

在你的应用程序中，它将如下：

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)
              )
      )
    )
  )
)

你会得到这样的结果：

希望它有所帮助！