dateInput()'s popup is incorrectly positioned when using bootstrap 5 top margin on parent container

[kennedymwavu]

Without any top margin on parent div, the calendar popup displays well:

library(shiny)

ui <- bslib::page(
  theme = bslib::bs_theme(version = 5, preset = "bootstrap"),
  tags$div(
    dateInput(inputId = "mydate", label = "My date")
  )
)

server <- \(input, output, session) {}

shinyApp(ui, server)

But when you add a top margin to the parent div, the popup displays over the input:

library(shiny)

ui <- bslib::page(
  theme = bslib::bs_theme(version = 5, preset = "bootstrap"),
  tags$div(
    class = "mt-5", # add top margin
    dateInput(inputId = "mydate", label = "My date")
  )
)

server <- \(input, output, session) {}

shinyApp(ui, server)

[cpsievert]

Interesting, thanks! FWIW, I think this achieves what you're looking for?

bslib::page(
    theme = bslib::bs_theme(version = 5, preset = "bootstrap"),
    tags$div(class = "pt-5"),
    dateInput(inputId = "mydate", label = "My date")
)

[kennedymwavu]

Yes, using padding works well.