0

I use airDatepicker from shinyWidget on my dashboard:

Here

I have succesfully change the size of the input container as shown in the picture, but not the container of calendar icon (the box where shinywidget place the calendar icon). What I wanted to change is the box encircled in yellow, not the icon itself which I mark with red border.

Currently my code looks like this:

tags$head( tags$style( HTML("
#choosedate {font-size: 13px; height: 25px;}
#datepickers-container > div > nav {font-size: 13px;}
#datepickers-container > div > div.datepicker--content {font-size: 13px;}
#datepickers-container > div > div.datepicker--buttons > span {font-size: 13px;}
#choosedate_button > i {font-size: 13px; max-height: 25px; height: 25px;}
")))

I set all font size 13px, including the size of the calendar icon. On the 6th line, this part doesn't work though: max-height: 25px; height: 25px;.

I tried to use that line of code to change the height of the calendar icon container so it matches the datepicker input container which is set to 25px.

How do I do it?
Thank you.

matchbox13
  • 73
  • 13

1 Answers1

1

It's the same procedure as for the other divs in your previous question:

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  tags$head(tags$style(HTML('
                            #choosedate {font-size: 75%}
                            #datepickers-container > div > nav {font-size: 75%;}
                            #datepickers-container > div > div.datepicker--content {font-size: 75%;}
                            #datepickers-container > div > div.datepicker--buttons > span {font-size: 75%;}
                            #choosedate_button > i {font-size: 75%;}
                            '))),
  airDatepickerInput(inputId = "choosedate", label = "month range", range = TRUE, placeholder = "choose month range", dateFormat = "M yy", view = "months", minView = "months", clearButton = TRUE,
                     autoClose = TRUE, update_on = "close", inline = FALSE, monthsField = "monthsShort", separator = " - ",
                     width = "161px", value = c("2010-01-01", "2019-12-31"), addon = "right")
)

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

shinyApp(ui, server)

Result

ismirsehregal
  • 30,045
  • 5
  • 31
  • 78
  • It works on the calendar icon itself, but actually what I wanted to change is the container (the box where shinywidget place the calendar icon) of the icon. I edited the picture in my question. Please check it again. Thank you. – matchbox13 Dec 09 '19 at 03:36