Shiny timeInput is too tight

Sonia 0
Viewed 36

I have used timeInput in a big project (not convenient to troubleshoot) as below:

timeInput("test1", "Test Label", value = strptime("18:00", "%H:%M"))

The fluidPage shows it as:

enter image description here

I wonder if anyone knows what's the problem or simple workaround.

I have run the shinyTimeExample and make my own simple example. Both work without a problem. I have the latest ShinyTime package version 1.0.3.

EDIT: I inspected both the project element and the other working element as suggested by GriffoGoes (thanks). There seems to be no difference or any CSS applied. Elements below:

Project:

<div class="input-group">
                    <input type="number" min="0" max="23" step="1" value="18" style="width: 8ch" class="form-control shinytime-hours">
                    <input type="number" min="0" max="59" value="00" style="width: 8ch" class="form-control shinytime-mins">
                  </div>

Working example:

<div class="input-group">
                      <input type="number" min="0" max="23" step="1" value="22" style="width: 8ch" class="form-control shinytime-hours">
                      <input type="number" min="0" max="59" value="39" style="width: 8ch" class="form-control shinytime-mins">
                    </div>

Also the problem is the same on a browser (Chrome) and on RStudio.

shiny r
2 Answers

As the issue is a result of a "conflict" between shinyThemes and shinyTime packages, it is hard to call this as a bug in either packages (but I guess you could check the packages/maintainers and see).

The quick solution is to use/adjust the current CSS to required values. Quick and dirty example below:

library(shiny)
library(shinyTime)
library(shinythemes)

ui <- fluidPage(
  theme = shinytheme("sandstone"),
  # Custom CSS to override sandstone settings
  tags$head(
    # Note the wrapping of the string in HTML()
    tags$style(HTML("
      .shinytime-hours , .shinytime-mins , .shinytime-secs {
        padding-right: 12px;
      }"))
  ),
  titlePanel("shinyTime Example App"),
  
  sidebarLayout(
    sidebarPanel(
      timeInput("time_input", "Enter time", value = strptime("12:34:56", "%T"))
    ),
    
    mainPanel(
      textOutput("time_output")
    )
  )
)

server <- function(input, output, session) {
  output$time_output <- renderText(strftime(input$time_input, "%T"))
}

shinyApp(ui, server)

In bigger applications there is likely an external CSS file already, where these changes would be more appropriated. See https://shiny.rstudio.com/articles/css.html

Alternatively, a new feature could be developed in the shinyTime package to allow custom CSS class/style settings - use https://github.com/burgerga/shinyTime/issues for that.

GriffoGoes0

I figured it out inspired by GriffoGoes comment. In the project I set theme = shinytheme("sandstone"). That seems to screw up timeInput.

Reproducible example below (modified this example):

library(shiny)
library(shinyTime)
library(shinythemes)

ui <- fluidPage(
  theme = shinytheme("sandstone"),
  titlePanel("shinyTime Example App"),
  
  sidebarLayout(
    sidebarPanel(
      timeInput("time_input", "Enter time", value = strptime("12:34:56", "%T"))
    ),
    
    mainPanel(
      textOutput("time_output")
    )
  )
)

server <- function(input, output, session) {
  output$time_output <- renderText(strftime(input$time_input, "%T"))
}

shinyApp(ui, server)
Sonia0
Related