CODEWITHSUNDEEP
rshiny
Phil Smith
Phil Smith

Reputation: 454

Styling text within built-in shiny functions

I would like to style the text that is displayed by shiny's built-in functions. See the reprex below.

library(shiny)
provS <- c("CA","NL","PE","NS","NB","QC","ON","MB","SK","AB","BC","YK","NT","NU")
provL <- c("Canada","Newfoundland and Labrador","Prince Edward Island",
  "Nova Scotia","New Brunswick","Quebec","Ontario","Manitoba","Saskatchewan",
  "Alberta","British Columbia","Yukon","Northwest Territories","Nunavut")
prov <- setNames(provS,provL)

ui <- fluidPage(
  selectInput(inputId="province",label=
    tags$b(tags$span(style="color:blue; font-size:26px", "Choose a province:")),
    choices = prov),
  tags$b(tags$span(style="color:blue; font-size:26px",
    "The abbreviation for the selected province is:")),
  textOutput(outputId="provName")
)
server <- function(input, output) {
  output$provName <- renderText({input$province})
}
shinyApp(ui, server)

In this example, I would like to display the text displayed inside the selectInput() box and the textOutput() result in the same blue 26px font used elsewhere on the page.

Upvotes: 1

Views: 458

Answers (1)

Ronak Shah
Ronak Shah

Reputation: 389355

You can apply custom css -

library(shiny)

ui <- fluidPage(
  
  tags$style(HTML("
  .selectize-input, .option {
    color:blue; 
    font-size:26px
  }
  ")),
  selectInput(inputId="province",label=
                tags$b(tags$span(style="color:blue; font-size:26px", "Choose a province:")),
              choices = prov),
  tags$b(tags$span(style="color:blue; font-size:26px",
                   "The abbreviation for the selected province is:")),
  div(textOutput(outputId="provName"), style="color:blue; font-size:26px")
)
server <- function(input, output) {
  output$provName <- renderText({input$province})
}
shinyApp(ui, server)

enter image description here

enter image description here

Upvotes: 2

Related Questions