shinydashboarddate-rangebs4dashrenderuiuioutput

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


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: enter image description here

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: enter image description here

Any help with aligning the dates input boxes with the "to" box would be appreciated.


Solution

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