メニューバーの下のShiny Date Pickerを開く

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を使用して820に設定されている保持divのz-index下方の第2日付選択でエラーを複製するコードを追加しました。これは他のものの上に置くのには十分ではないように思われるので、styleタグを使用してそれを増やすことができます。

あなたは、たとえば追加することができます。

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

をdateRangeInput後。

Answer 2

私はこの問題は、オブジェクトがページ上のどの位置に配置されているかによって、クラスを動的に変更するブートストラップCSSに起因すると考えています。 2つの日付範囲ピッカーがわずかに異なるクラスが割り当てられている、あなたの元の例では

..

クラス=「DatePickerのの日付ピッカー、ドロップダウンドロップダウン・メニューDatePickerの-オリエント左DatePickerの - オリエント・下」

と

クラス= "DatePickerの日付ピッカーの-ドロップダウンドロップダウン・メニューDatePickerの-オリエント左DatePickerの - オリエント・トップ"

ページ上のオブジェクトの順序を並べ替えるだけで、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)