CODEWITHSUNDEEP
cssrshinyshinydashboardpickerinput
Farhad
Farhad

Reputation: 148

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

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

Upvotes: 1

Views: 1603

Answers (2)

Farhad
Farhad

Reputation: 148

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.

Upvotes: 2

LBZR
LBZR

Reputation: 181

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) {
  }
))

Upvotes: 1

Related Questions