CODEWITHSUNDEEP
rshinywidgetfont-size
Dr Dave
Dr Dave

Reputation: 501

Modifying subelements of R shiny widgets - dateRangeInput selected date font size

In building a R Shiny application I've added a dateRangeInput widget into a tight space. I'd like to independently modify the font size of the label and the input dates but independently. I can shrink both by a fixed amount to match other controls in a well panel with tags$style in the header,

      tags$style(HTML("
                      .smallLabel {
                      font-size: 70%;
                      line-height: 20px;
                      margin-bottom: 0px;
                      padding-left: 12px;
                      padding-bottom: 0px;
                      margin-top: 0px;
                      padding-top: 0px;
                      }"
                   ))
and, on the UI 
                  tags$div(class="smallLabel",
                   dateRangeInput("daterangeTS", "Date range:",
                                  start = getDateStart(wy),
                                  end   = getDateEnd(wy)
                   ))

but the two start/end dates get cut off because the font is too big for the space. My question is: how can I modify the size of the start/end date fonts independently of the label? More generally, how do I discover the structure of the widgets so that I can figure this out on my own?

Upvotes: 0

Views: 34

Answers (1)

gdevaux
gdevaux

Reputation: 2505

To modify elements inside of a widget, you need to identify the CSS div or class you want to alter. To do so, you can use the navigator inspector on your shiny app (CTRL+SHIFT+I or right click -> inspect), and search the HTML and CSS code to find your element. Then, you can try several modifications directly in the inspector, and copy paste them into your shiny code.

In this case, the HTML element containing the start date and end date has a class form-control. So, to alter the form-control contained inside your widget, you want to add some CSS to #daterangeTS .form-control.

Full code is :

library(shiny)

ui <- fluidPage(
  tags$style(
  HTML(".smallLabel {
          font-size: 70%;
          line-height: 20px;
          margin-bottom: 0px;
          padding-left: 12px;
          padding-bottom: 0px;
          margin-top: 0px;
          padding-top: 0px;
          }
       #daterangeTS .form-control{
        font-size: 50%;
       }"
  )),
  tags$div(
    class="smallLabel",
    dateRangeInput(
      "daterangeTS", 
      "Date range:",
      start = Sys.Date()-30,
      end   = Sys.Date()
    ))
)

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

shinyApp(ui, server)

Upvotes: 0

Related Questions