How to Reduce sidebarPanel Text Size in Shiny?

Question

How would I reduce the text size and selectInput box size in my Shiny application?

Right now, I have four selectInput boxes and corresponding titles and they are pretty large. I am looking to include up to 16 of them, but with a reduced size. I've included a sample ui.R from the Shiny tutorial. Thanks for your help!

Update: I updated the following code with the tags$style line. This made the text smaller. Now, I'm not sure how to make the selectInput box smaller.

shinyUI(fluidPage(
  titlePanel("censusVis"),

  sidebarLayout(
    sidebarPanel(
      helpText("Create demographic maps with 
        information from the 2010 US Census."),
      tags$style(type='text/css', ".selectize-input { font-size: 10px; line-height: 10px;} .selectize-dropdown { font-size: 10px; line-height: 10px; }")
      selectInput("var", 
        label = "Choose a variable to display",
        choices = c("Percent White", "Percent Black",
          "Percent Hispanic", "Percent Asian"),
        selected = "Percent White"),

      sliderInput("range", 
        label = "Range of interest:",
        min = 0, max = 100, value = c(0, 100))
    ),

    mainPanel(
      textOutput("text1")
    )
  )
))

Answer 1

To reduce the font size, just add a bit of CSS to the document's header, targeting elements of class "selectize-input" and "selectize-dropdown" . (Those affect, respectively, the font size shown in the selection bar and in its dropdown menu.)

To reduce the control's width, you can wrap it in a fluidRow() and allocate it some fraction of the 12 columns that the row contains.

Here's a fully reproducible example, which you can run by just copy and pasting into R:

library(shiny)

shinyApp(
    ui = fluidPage(
        tags$head(tags$style(HTML("
        .selectize-input, .selectize-dropdown {
          font-size: 75%;
        }
        "))),    
        titlePanel("censusVis"),
        sidebarLayout(
            sidebarPanel(
                helpText("Create demographic maps with
        information from the 2010 US Census."),    
                fluidRow(column(6,
                       selectInput("var",
                            label = "Choose a variable to display",
                            choices = c("Percent White", "Percent Black",
                                "Percent Hispanic", "Percent Asian"),
                            selected = "Percent White")
                )),
                sliderInput("range",
                            label = "Range of interest:",
                            min = 0, max = 100, value = c(0, 100))
                ),
            mainPanel(textOutput("text1"))
        )
    ),
    server = function(input, output) {}
)