bs4Dash 框侧边栏中闪亮的 dateRangeInput 日历小部件的位置

Question

我正在使用

bs4Dash

包在 Shiny 中构建一个仪表板，并在

dateRangeInput()

中包含

boxSidebar()

小部件时注意到一些奇怪的行为。日历小部件显示在输入文本框上方而不是下方，从而防止用户更改输入的月份或年份（除非在输入中手动键入）。

我在

infoBox()

的第一个实例内有一组四个

fluidRow()

KPI，并且

box()

包含一个绘图，可以使用

fluidRow()

的第二个实例内的日期范围输入进行过滤。我怀疑这可能是问题的一部分，因为如果我完全删除包含我的信息框的

fluidRow()

的第一个实例，则不会发生奇怪的日历小部件行为。这是最低限度可重现示例的代码：

library(shiny)
library(bs4Dash)

df <- data.frame(
  date = as.Date(c("2024-12-20", "2024-12-21")),
  value = 1:2
)

ui <- dashboardPage(
  header = dashboardHeader(),
  sidebar = dashboardSidebar(),
  body = dashboardBody(
    fluidRow(
      lapply(1:4, function(x) {
        infoBox(
          title = paste0("Info Box ", x),
          value = x,
          width = 3,
        )
      })
    ),
    fluidRow(
      box(
        collapsible = FALSE,
        plotOutput("examplePlot", width = "100%"),
        sidebar = boxSidebar(
          id = "exampleSidebar",
          width = 40,
          dateRangeInput(
            inputId = "exampleDateRangeInput",
            label = "Select Date",
            format = "M dd, yyyy",
            width = "100%"
          ),
          easyClose = FALSE
        )
      )
    )
  )
)

server <- function(input, output, session) {
  output$examplePlot <- renderPlot({
    ggplot2::ggplot(df, ggplot2::aes(date, value)) +
      ggplot2::geom_line()
  })
}

shinyApp(ui, server)

这会产生以下奇怪的小部件行为：

Answer 1

您可以包含一些自定义 CSS 并将日期选择器的 z-index 更改为非常高。

z-index

基本上是 html 页面上的图层顺序。

library(shiny)
library(bs4Dash)

df <- data.frame(
  date = as.Date(c("2024-12-20", "2024-12-21")),
  value = 1:2
)

ui <- dashboardPage(
  header = dashboardHeader(),
  sidebar = dashboardSidebar(),
  body = dashboardBody(
    # Include custom CSS
    tags$head(
      tags$style(HTML("
        .datepicker.datepicker-dropdown.dropdown-menu {
          z-index: 999003 !important; /* Ensure it appears above other elements */
        }
      "))
    ),
    fluidRow(
      lapply(1:4, function(x) {
        infoBox(
          title = paste0("Info Box ", x),
          value = x,
          width = 3
        )
      })
    ),
    fluidRow(
      box(
        collapsible = FALSE,
        plotOutput("examplePlot", width = "100%"),
        sidebar = boxSidebar(
          id = "exampleSidebar",
          width = 40,
          dateRangeInput(
            inputId = "exampleDateRangeInput",
            label = "Select Date",
            format = "M dd, yyyy",
            width = "100%"
          ),
          easyClose = FALSE
        )
      )
    )
  )
)

#<div class="datepicker datepicker-dropdown dropdown-menu datepicker-orient-left datepicker-orient-top" style="top: -6.99966px; left: 615.094px; z-index: 11; display: block;"><div class="datepicker-days" style=""><table class="table-condensed"><thead><tr><th colspan="7" class="datepicker-title" style="display: none;"></th></tr><tr><th class="prev">«</th><th colspan="5" class="datepicker-switch">December 2024</th><th class="next">»</th></tr><tr><th class="dow">Su</th><th class="dow">Mo</th><th class="dow">Tu</th><th class="dow">We</th><th class="dow">Th</th><th class="dow">Fr</th><th class="dow">Sa</th></tr></thead><tbody><tr><td class="old day" data-date="1732406400000">24</td><td class="old day" data-date="1732492800000">25</td><td class="old day" data-date="1732579200000">26</td><td class="old day" data-date="1732665600000">27</td><td class="old day" data-date="1732752000000">28</td><td class="old day" data-date="1732838400000">29</td><td class="old day" data-date="1732924800000">30</td></tr><tr><td class="day" data-date="1733011200000">1</td><td class="day" data-date="1733097600000">2</td><td class="day" data-date="1733184000000">3</td><td class="day" data-date="1733270400000">4</td><td class="day" data-date="1733356800000">5</td><td class="day" data-date="1733443200000">6</td><td class="day" data-date="1733529600000">7</td></tr><tr><td class="day" data-date="1733616000000">8</td><td class="day" data-date="1733702400000">9</td><td class="day" data-date="1733788800000">10</td><td class="day" data-date="1733875200000">11</td><td class="day" data-date="1733961600000">12</td><td class="day" data-date="1734048000000">13</td><td class="day" data-date="1734134400000">14</td></tr><tr><td class="day" data-date="1734220800000">15</td><td class="day" data-date="1734307200000">16</td><td class="day" data-date="1734393600000">17</td><td class="day" data-date="1734480000000">18</td><td class="day" data-date="1734566400000">19</td><td class="active day" data-date="1734652800000">20</td><td class="day" data-date="1734739200000">21</td></tr><tr><td class="day" data-date="1734825600000">22</td><td class="day" data-date="1734912000000">23</td><td class="day" data-date="1734998400000">24</td><td class="day" data-date="1735084800000">25</td><td class="day" data-date="1735171200000">26</td><td class="day" data-date="1735257600000">27</td><td class="day" data-date="1735344000000">28</td></tr><tr><td class="day" data-date="1735430400000">29</td><td class="day" data-date="1735516800000">30</td><td class="day" data-date="1735603200000">31</td><td class="new day" data-date="1735689600000">1</td><td class="new day" data-date="1735776000000">2</td><td class="new day" data-date="1735862400000">3</td><td class="new day" data-date="1735948800000">4</td></tr></tbody><tfoot><tr><th colspan="7" class="today" style="display: none;">Today</th></tr><tr><th colspan="7" class="clear" style="display: none;">Clear</th></tr></tfoot></table></div><div class="datepicker-months" style="display: none;"><table class="table-condensed"><thead><tr><th colspan="7" class="datepicker-title" style="display: none;"></th></tr><tr><th class="prev">«</th><th colspan="5" class="datepicker-switch">2024</th><th class="next">»</th></tr></thead><tbody><tr><td colspan="7"><span class="month">Jan</span><span class="month">Feb</span><span class="month">Mar</span><span class="month">Apr</span><span class="month">May</span><span class="month">Jun</span><span class="month">Jul</span><span class="month">Aug</span><span class="month">Sep</span><span class="month">Oct</span><span class="month">Nov</span><span class="month focused active">Dec</span></td></tr></tbody><tfoot><tr><th colspan="7" class="today" style="display: none;">Today</th></tr><tr><th colspan="7" class="clear" style="display: none;">Clear</th></tr></tfoot></table></div><div class="datepicker-years" style="display: none;"><table class="table-condensed"><thead><tr><th colspan="7" class="datepicker-title" style="display: none;"></th></tr><tr><th class="prev">«</th><th colspan="5" class="datepicker-switch">2020-2029</th><th class="next">»</th></tr></thead><tbody><tr><td colspan="7"><span class="year old">2019</span><span class="year">2020</span><span class="year">2021</span><span class="year">2022</span><span class="year">2023</span><span class="year active focused">2024</span><span class="year">2025</span><span class="year">2026</span><span class="year">2027</span><span class="year">2028</span><span class="year">2029</span><span class="year new">2030</span></td></tr></tbody><tfoot><tr><th colspan="7" class="today" style="display: none;">Today</th></tr><tr><th colspan="7" class="clear" style="display: none;">Clear</th></tr></tfoot></table></div><div class="datepicker-decades" style="display: none;"><table class="table-condensed"><thead><tr><th colspan="7" class="datepicker-title" style="display: none;"></th></tr><tr><th class="prev">«</th><th colspan="5" class="datepicker-switch">2000-2090</th><th class="next">»</th></tr></thead><tbody><tr><td colspan="7"><span class="decade old">1990</span><span class="decade">2000</span><span class="decade">2010</span><span class="decade active focused">2020</span><span class="decade">2030</span><span class="decade">2040</span><span class="decade">2050</span><span class="decade">2060</span><span class="decade">2070</span><span class="decade">2080</span><span class="decade">2090</span><span class="decade new">2100</span></td></tr></tbody><tfoot><tr><th colspan="7" class="today" style="display: none;">Today</th></tr><tr><th colspan="7" class="clear" style="display: none;">Clear</th></tr></tfoot></table></div><div class="datepicker-centuries" style="display: none;"><table class="table-condensed"><thead><tr><th colspan="7" class="datepicker-title" style="display: none;"></th></tr><tr><th class="prev">«</th><th colspan="5" class="datepicker-switch">2000-2900</th><th class="next">»</th></tr></thead><tbody><tr><td colspan="7"><span class="century old">1900</span><span class="century active focused">2000</span><span class="century">2100</span><span class="century">2200</span><span class="century">2300</span><span class="century">2400</span><span class="century">2500</span><span class="century">2600</span><span class="century">2700</span><span class="century">2800</span><span class="century">2900</span><span class="century new">3000</span></td></tr></tbody><tfoot><tr><th colspan="7" class="today" style="display: none;">Today</th></tr><tr><th colspan="7" class="clear" style="display: none;">Clear</th></tr></tfoot></table></div></div>

server <- function(input, output, session) {
  output$examplePlot <- renderPlot({
    ggplot2::ggplot(df, ggplot2::aes(date, value)) +
      ggplot2::geom_line()
  })
}

shinyApp(ui, server)