Question

我已经制作了一个应用程序，你需要选择一个日期。当您使用日期选择器时，它将显示在菜单栏后面，并隐藏重要信息。

您可以查看日期选择器的顶行，并可以查看您的月份，并在几个月之间快速浏览。

现在，如果日期稍低，菜单栏将隐藏日期选择器的顶部并显示如下：

我该如何避免这种情况？我添加了使用下面第二个日期选择器

复制错误的代码

# 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

使用内联CSS将持有数据选择器的z-index的{{1}}设置为820。这似乎不足以将其置于其他所有内容之上，因此您可以使用div标记来增加它。

您可以添加：

style

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

Answer 2

我认为问题是由于bootstrap css根据对象在页面上的位置动态改变类。

在您的原始示例中，两个日期范围选择器已分配略有不同的类..

class =“datepicker datepicker-dropdown dropdown-menu datepicker-orient-left datepicker-orient-bottom”

和

class =“datepicker datepicker-dropdown dropdown-menu datepicker-orient-left datepicker-orient-top”

只需重新排列页面上对象的顺序，我就会将 datepicker-orient-bottom 应用于两者。

如果此对象的顺序不合适，则必须定义自己的css。

我重新排序的例子..

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

ui <- dashboardPage(
    dashboardHeader(title = "Basic dashboard"),
    ## Sidebar content
    dashboardSidebar(tags$head(tags$style(HTML('.shiny-server-account { display: none; }'))),
    sidebarMenu(
        dateRangeInput('dateRange1', 
                       label = 'Period 1, Current Month',
                       start = Sys.Date(), end = Sys.Date() + 9,
                       separator = ";", 
                       weekstart = 1),
        dateRangeInput('dateRange2', 
                       label = 'Period 2, Current Month',
                       start = Sys.Date(), end = Sys.Date() + 9,
                       separator = ";", 
                       weekstart = 1), 
        menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
        menuItem("Widgets", tabName = "widgets", icon = icon("th"))
    )
),
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)

菜单栏下方的闪亮日期选择器

2 个答案: