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

Question

我需要在我的应用程序中动态设置输入日期，因此我需要将 uiOutpot/renderUI 用于 dataRangeInput。但是，当我将它直接放入“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"
      )
    })
  }
)

如下图所示，它将错位且丑陋：

将日期输入框与“to”框对齐的任何帮助将不胜感激。

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"
      )
    })
  }
)