当我们将它与 uiOutput() 一起使用时，dateRangeInput() 在 shinydashboard 中未对齐

Question

我需要在我的应用程序中动态设置输入日期，因此我需要对 dataRangeInput 使用 uiOutpot/renderUI。但是当我直接把它放在“ui”中时，就像这个简单的例子一样：

library(shiny)
library(bs4Dash)

shinyApp(
  ui = dashboardPage(
    title = "Basic Dashboard",
    header = dashboardHeader(),
    sidebar = dashboardSidebar(
      dateRangeInput(
        "startEndDate", "Date Range",
        start = "2022-01-01",
        end = "2022-01-30",
        min = "2021-01-01",
        max =  "2022-01-30",
        format = "yyyy-mm-dd"
      )
    ),
    controlbar = dashboardControlbar(),
    footer = dashboardFooter(),
    body = dashboardBody()
  ),
  server = function(input, output) {
  }
)

它看起来干净且对齐，如图所示：

但是当我将它包装在 renderUI 中时，如下代码所示：

library(shiny)
library(bs4Dash)

shinyApp(
  ui = dashboardPage(
    title = "Basic Dashboard",
    header = dashboardHeader(),
    sidebar = dashboardSidebar(
      uiOutput("dateRange")
      
    ),
    controlbar = dashboardControlbar(),
    footer = dashboardFooter(),
    body = dashboardBody()
  ),
  server = function(input, output) {
    
    output$dateRange <- renderUI({
      dateRangeInput(
        "startEndDate", "Date Range",
        start = "2022-01-01",
        end = "2022-01-30",
        min = "2021-01-01",
        max =  "2022-01-30",
        format = "yyyy-mm-dd"
      )
    })
  }
)

它会像这张图片那样错位且丑陋：

如果您能帮助我们将日期输入框与“收件人”框对齐，我们将不胜感激。

Answer 1

我想出了这个：

library(shiny)
library(bs4Dash)

shinyApp(
  ui = dashboardPage(
    title = "Basic Dashboard",
    header = dashboardHeader(),
    sidebar = dashboardSidebar(
      tags$style(".form-control, .input-group-addon {padding-top: 0px !important;}"),
      uiOutput("dateRange")
    ),
    controlbar = dashboardControlbar(),
    footer = dashboardFooter(),
    body = dashboardBody()
  ),
  server = function(input, output) {
    output$dateRange <- renderUI({
      dateRangeInput(
        "startEndDate", "Date Range",
        start = "2022-01-01",
        end = "2022-01-30",
        min = "2021-01-01",
        max =  "2022-01-30",
        format = "yyyy-mm-dd"
      )
    })
  }
)

当我们将它与 uiOutput() 一起使用时，dateRangeInput() 在 shinydashboard 中未对齐

dateRangeInput() is not aligned in shinydashboard when we use it with uiOutput()

date-range

shinydashboard

uioutput

bs4dash

renderui