bs4Dash的boxSidebar中shiny dateRangeInput日历组件位置异常问题

问题现象 #

使用Shiny的bs4Dash包开发仪表盘时，在boxSidebar()中嵌入dateRangeInput()组件出现异常：日历选择框显示在输入文本框上方而非下方，导致无法通过界面点击切换年月，只能手动在输入框中键入日期。

该异常仅在页面顶部存在包含4个infoBox()的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)

问题原因 #

这是bs4Dash的默认样式冲突导致：box-sidebar元素默认设置了overflow: auto，当页面存在infoBox等组件改变布局高度时，日历弹出层的定位计算出现偏差，导致其显示在输入框上方。

修复方案 #

添加自定义CSS，调整box-sidebar的overflow属性为visible，同时确保日历弹出层的层级足够高，避免被其他元素遮挡：

修改后的完整UI代码如下：

ui <- dashboardPage(
  header = dashboardHeader(),
  sidebar = dashboardSidebar(),
  body = dashboardBody(
    tags$style(HTML("
      .box-sidebar {
        overflow: visible !important;
      }
      .daterangepicker {
        z-index: 9999 !important;
      }
    ")),
    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
        )
      )
    )
  )
)

修改后，日历选择框会正常显示在输入框下方，可正常点击切换年月。

内容的提问来源于stack exchange，提问作者cristian-vargas