Change the size /spacing of label text in R Shiny fileInput?

Question

I am working on an R Shiny app, where I have constructed a file input function like so:

  csvFileInput <- function(name_space, file_name="file", label = "Input file") {
    ns <- NS(name_space)
    # doc here: https://shiny.rstudio.com/reference/shiny/latest/fileInput.html
    fileInput(ns(file_name), label)
  }

Now I am trying to change the font settings of the label supplied here (in the image below, it is "File in"). The font seems too large for longer labels and it sometimes looks clunky.

• Is there a way to change the font size in these labels?

• Is there a way to add whitespace such as tabs or linebreaks?

The docs simply say that this label is

Display label for the control, or NULL for no label.

There have been other questions on SO regarding Shiny text rendering in general, but I am not sure that those labels are implemented similarly and I have no knowledge of web scripting, so any help is much appreciated.

Answer 1

This article pretty neatly summarizes the three ways you can style Shiny with CSS. If you end up styling more than a few elements, it's often best to add the CSS through a style sheet (ie an actual .css file), which in Shiny needs to be placed in a subdirectory named "www", which in turn is in your app directory.

If you're styling just one element ("element" meaning a UI output from a function), and you want the styling to apply to the entire element, you can wrap the element in a div tag and use the style attribute like so:

div(
   fileInput("file1", "Choose CSV File",
               accept = c(
               "text/csv",
               "text/comma-separated-values,text/plain",
               ".csv")
   ), style="font-size:80%; font-family:Arial;"
)

If you only want to style one component of the element, as you've described, then you need to use the developer tools in your browser to figure out what HTML you can target for your styling. In the case of a fileInput label, an actual <label> HTML tag is our target. If you'd rather avoid needing a stylesheet, then you can add the necessary CSS through the third approach described in the Shiny article, which is through the tags function. You can add the following code to your UI (right at the top of fluidPage ) to change the font and add padding below the label:

tags$head(
  tags$style(HTML(
    "label { font-size:80%; font-family:Times New Roman; margin-bottom: 
    20px; }"
  ))
)