主页 / coding / 问题 / 79298435
Accepted
cristian-vargas
Asked: 2024-12-21 05:30:50 +0800 CST

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

  • 772

我正在使用包在 Shiny 中构建仪表板，并注意到在 中bs4Dash包含小部件时出现了一些奇怪的行为。日历小部件显示在输入文本框上方而不是下方，从而阻止用户更改输入的月份或年份（除非在输入中手动输入）。dateRangeInput()boxSidebar()

infoBox()我在 的第一个实例中设置了一组四个KPI fluidRow()，并且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)

这会产生以下奇怪的小部件行为： 闪亮的 dateRangeInput 日历小部件定位错误

1 个回答

  1. Best Answer

    您可以包含一些自定义 css，并将日期选择器的 z-index 更改为非常高。z-index基本上是 html 页面上的层顺序。

    编辑：我添加了一些小部分，将日期选择器向下推 160 像素，以便弹出窗口不会遮挡顶部的任何框。

    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("
      /* Ensure the datepicker dropdown appears above other elements */
      .datepicker.datepicker-dropdown.dropdown-menu {
        z-index: 1050 !important;
      }
  
      /* Adjust placement of the date range input widget */
      .shiny-date-range-input.form-group.shiny-input-container.shiny-bound-input {
        margin-top: 160px !important; /* Add spacing above the widget */
      }
    "))
    ),
    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（用户界面，服务器）

    正如你所见，这个方法有效并且没有任何遮挡：

    出去

    • 1

相关问题