Vertical spacing issue with dateInput and certain themes

[prubin]

The default behavior of a dateInput widget when clicked on by the user seems to be to open the calendar above the widget if there is sufficient vertical space and below the widget if not. When I select certain themes, including cyborg and darkly, the calendar always opens above the widget. If the widget is near the top of the window, this results in the top of the calendar (in particular the month or year and the left/right arrows) being cut off.

Is there a workaround (other than moving the widget lower in the window)? Should this be reported as a bug (and if so where)?

Thanks.

[scottyd22]

Hi @prubin. To aid in troubleshooting, can you please provide a minimal example that demonstrates the issue? I created a basic shiny app that only has a dateInput widget and can't seem to recreate the issue. Using both cyborg and darkly, the calendar opens above or below the widget depending on space availability, as one would expect.

[prubin]

The example below (an app.R file and a markdown help file) demonstrate the issue, at least when I run it from RStudio. With the default theme and most others, the dateInput field opens downward, but with cyborg, darkly and a few others it opens upward and runs out of room (at least on Firefox and Chrome). The upload button only seems to support images, so I'll have to paste the code in here.

app.R:

###############################################################################################
# This Shiny web application is designed to demonstrate an issue with dateInput spacing under #
# some themes (including darkly and cyborg) but not others (including the default theme).     #
#                                                                                             #
# Author: Paul A. Rubin (rubin@msu.edu)                                                       #
###############################################################################################

library(markdown)  # required to fix an installation problem on shinyapps.io
library(shiny)
library(shinythemes)

# Set a title for the application.
appTitle <- "Date Input Example"

# Set the version number here for display in the footer.
version <- "1.0"

############################################
# This section defines the user interface. #
############################################

ui <- navbarPage(
  "",
  id = "navbar",
  windowTitle = appTitle,
  header = tags$head(
    # This suppresses red error messages in the UI.
    tags$style(type="text/css",
               ".shiny-output-error { visibility: hidden; }",
               ".shiny-output-error:before { visibility: hidden; }"
    ),
    # This positions notifications center stage.
    tags$style(
      HTML(".shiny-notification {
             position:fixed;
             top: calc(20%);
             left: calc(50%);
             }
             "
      )
    )
  ),
  useShinyjs(),

  tabPanel(
    "Whatever",
    themeSelector(),
    includeMarkdown("help.md"),
    fluidRow(
      column(
        width = 3,
        wellPanel(
          dateInput(
            "mrt_start",
            "Select the start date:",
            format = "mm-dd-yyyy",
            startview = "month"
          )
        )#,
      )
    )
  )

)

###########################################
# This section provides the server logic. #
###########################################

server <- function(input, output) {

}

# This runs the application .
shinyApp(ui = ui, server = server)

help.md:

# Your Ad Here $10

Use this tab to do something or other, we're not exactly sure what.

When using the date inputs, click the month to get an annual calendar and click the year to get a span of years. You can also just type a date in the control.

[scottyd22]

Thank you for the example. It will probably take some more fine-tuning, but adjusting the datepicker-orient-top styling causes the input to open downward.

# This positions notifications center stage.
    tags$style(
      HTML(".shiny-notification {
             position:fixed;
             top: calc(20%);
             left: calc(50%);
            }
             
            .datepicker-orient-top {
            top: 310px !important;
            z-index:99999 !important;
            } 
            
            .datepicker-orient-top:after {
            display: none;
            }
             "
      )
    )

[prubin]

Thanks. I'll give that a try. My workaround so far has been to insert three br() commands before the dateInput, which creates enough whitespace to accommodate the input.