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

Question

有没有办法始终使 uidateRangeInput完全可见？最小化窗口并单击日期，会发生这种情况：

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 中，它将如下所示：

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

你会得到这样的东西：

希望能帮助到你！