How to change the font size of a pickerinput in Shiny?

Question

I am trying to change (reduce) the font size of a pickerinput widget in shiny with no luck. I checked the other solutions online which helped changing the size of choice options. But I need to change both the font size shown in the selection/selected bar and in its dropdown menu choices. Here is a simple chunk of code:

library(shiny)

shinyApp(
  ui = fluidPage(
    titlePanel("censusVis"),
    sidebarLayout(
      sidebarPanel(
        helpText("Create demographic maps with
        information from the 2010 US Census."),    
        fluidRow(column(6,
                        pickerInput("var",
                                    label = "Choose a variable to display",
                                    choices = c("Percent White", "Percent Black",
                                                "Percent Hispanic", "Percent Asian"),
                                    selected = "Percent White",
                                    choicesOpt = list(
                                      style = rep_len("font-size: 75%; line-height: 1.6;", 4)
                                    ) # choices style
                        )
        ))
      ),
      mainPanel(textOutput("text1"))
    )
  ),
  server = function(input, output) {}
)

This line:

choicesOpt = list(style = rep_len("font-size: 75%; line-height: 1.6;", 4)) # choices style

from this link: https://github.com/dreamRs/shinyWidgets/issues/74 reduced font size in dropdown menu, but not the selected choice in the selection bar. Any help will be highly appreciated.

enter image description here

Thank you @rawr for the edit. This was my first question posted. — Farhad, Dec 04 '21 at 04:22

score 2 · Accepted Answer · answered Dec 10 '21 at 21:18

Thanks to Victor P. from @dreamRs. He helped me solve this issue that I have been working on for a long time. Here is the solution:

library(shiny)
shinyApp(
  ui = fluidPage(
    tags$style(".my-class {font-size: 75%; line-height: 1.6;}"),
    
    shinyWidgets::pickerInput(
      inputId = "var",
      label = "Choose a variable to display",
      choices = c("Percent White", "Percent Black",
                  "Percent Hispanic", "Percent Asian"),
      selected = "Percent White",
      options = list(style = "my-class"),
      choicesOpt = list(
        style = rep_len("font-size: 75%; line-height: 1.6;", 4)
      ) # choices style
    )
  ),
  server = function(input, output) {}
)

We should add a class to the button with the selected value, then we can use this class to set some styles on the button. This case is closed.

score 1 · Answer 2 · answered Dec 04 '21 at 12:56

Would using selectInput instead of pickerInput work? Try this

runApp(shinyApp(
  ui = fluidPage(
    tags$style(type='text/css', ".selectize-input { font-size: 75%; line-height: 1.6;} .selectize-dropdown { font-size: 75%; line-height: 1.6; }"),
    selectInput(
      inputId = 'var',
      label = "Choose a variable to display",
      choices = c("Percent White", "Percent Black",
                  "Percent Hispanic", "Percent Asian"),
      selected = "Percent White"
    )
  ),
  server = function(input, output, session) {
  }
))

Thanks Lovekesh Bazaria for the answer. However, I specifically need to use pickerinput due to its cool features like "select all/ deselect all". I tried finding something similar to your solution but for pickerinput, have not been able to find any. — Farhad, Dec 04 '21 at 21:21

How to change the font size of a pickerinput in Shiny?

2 Answers2