代码之家 › 专栏 › 技术社区 › cristian-vargas

闪亮日期的位置在bs4Dash框侧边栏中输入日历小部件

bs4dash shiny r

0

cristian-vargas · 技术社区 · 11 月前

我正在使用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)

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

1 回复 | 直到 11 月前

1

Tim G 11 月前

您可以包含一些自定义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(用户界面,服务器)

正如你所看到的,这是有效的,没有什么是模糊的: