CODEWITHSUNDEEP
cssrshiny
patrick
patrick

Reputation: 4852

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

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.

The docs simply say that this label is

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

R Shiny Screenshot

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.

Upvotes: 1

Views: 5167

Answers (1)

cmaher
cmaher

Reputation: 5215

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 (i.e. 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; }"
  ))
)

Upvotes: 5

Related Questions