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

Question

I need to set the input date dynamicallly in my app and therefore I need to use uiOutpot/renderUI for dataRangeInput. However when I put it directly in "ui" as in this simple example:
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) {
}
)
it comes up clean and aligned, as it is shown in this picture:
But when I wrap it inside renderUI as in this code:
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"
)
})
}
)
it will be misaligned and ugly as in this picture:
Any help with aligning the dates input boxes with the "to" box would be appreciated.

Answer 1

I was able to figure this out:
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"
)
})
}
)