ixodid
ixodid

Reputation: 2400

How change font size of shinyWidgets::autonumericInput()

Using tags$style I can alter the appearance of the text in a numericInput field, including the font-size.

Using tags$style I can alter some aspects of the appearance of the text in a shinyWidgets::autonumericInput field. The color and style change, but the font-size does not.

How do I alter the font-size?

library("shiny")
library("bslib")
library("shinyWidgets")

ui <- bootstrapPage(
  
  # Format Travel Summary
  tags$head(
    tags$style("#first{
                 color: green; 
                 font-size: 26px; 
                 font-style: italic;}"
    ),
    tags$style("#second{
                 color: red; 
                 font-size: 9px; 
                 font-style: italic;}"
    ),
  ),
  
  theme = bs_theme(version = 5, bootswatch = "minty"), 
  div(class = "container-fluid",
      
     
      div(class = "row",
          
          div(class = "col-4",
              HTML('<b>First</b>'),
              numericInput(
                inputId = "first", 
                label = NULL, 
                value = 55
              )
          ),
          
          div(class="col-4", 
              HTML('<b>Second</b>'),
              autonumericInput(
                inputId = "second", 
                label = NULL, 
                value = 255, 
                currencySymbol = "$",
                currencySymbolPlacement = "p",
                decimalPlaces = 0,
                minimumValue = 0,
                maximumValue = 9000,
                width = "160px"
              ),
          ),
        )
  )
)
  
  server <- function(input, output) {
  }
  
  shinyApp(ui = ui, server = server)

Upvotes: 1

Views: 530

Answers (1)

danlooo
danlooo

Reputation: 10627

Your css rule was overwritten. You have to add the !important modifier:

  tags$head(
    tags$style("#first{
                 color: green; 
                 font-size: 26px  !important; 
                 font-style: italic;}"
    ),
    tags$style("#second{
                 color: red; 
                 font-size: 9px !important; 
                 font-style: italic;}"
    ),
  )

enter image description here

Upvotes: 2

Related Questions