CODEWITHSUNDEEP
rshinyshinydashboardshinywidgets
matchbox13
matchbox13

Reputation: 85

How to change font size of the input in airDatepicker from shinywidgets package?

I'm using airDatepicker from the shinyWidgets package. Here's my code:

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")

I also use tags$style to put all of my CSS code. Currently the font of airDatepicker (the input, not the label) is way too large for the rest of my dashboard. Here's the parts which fonts I want to make smaller :

Here

How do I do it? Thank you.

Upvotes: 0

Views: 900

Answers (1)

ismirsehregal
ismirsehregal

Reputation: 33442

You'll have to find the correct selectors (e.g. with your browser):

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%;}
                            '))),
  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)

BeforeAfter

Upvotes: 2

Related Questions