Search code examples
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"
      )
    })
  }
)