閃亮的日期選取器在菜單欄下方打開

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

的div的z-index保持數據選擇器使用內聯CSS設置爲820的錯誤代碼。這似乎不足以把它放在一切之上，所以你可以使用style標籤來增加它。

例如，您可以添加：

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

的dateRangeInput後。

Answer 2

我相信這個問題是由於引導CSS動態地改變類，取決於對象在頁面上的位置。

在原來的例子中的兩個日期範圍採摘已經分配略有不同類..

類=「日期選擇器日期選擇器，下拉下拉菜單日期選擇器 - 定位 - 左日期選擇器 - 定位 - 底」

和

類= 「日期選擇日期選擇器-下拉的下拉菜單日期選擇器 - 定位 - 左日期選擇器 - 定位 - 頂部」

通過簡單地重新排列頁面上對象的順序，我已將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)