CODEWITHSUNDEEP
cssshiny
Jay
Jay

Reputation: 29

Shiny: CSS class info-box-number

Apologies for my lack of CSS/HTML knowledge in applying to Shiny. I am using R version 3.6.2, trying to change the color of the value in infoBox widget. The value is defined based on a reactive input. Specifically, value is changed based on a false condition and I would like to show the 'Disconnected' in red and 'Connected' in green. Below are the code segments from UI/Server.

UI 

tags$div(id="Server",style="display:inline-block",infoBoxOutput("progressBox")),

Server

output$progressBox <- renderInfoBox({

output$progressBox <- renderInfoBox({
  infoBox("Status", value = ifelse(isTruthy(input$player_names),'Disconnected','Connected'), icon = icon('thumbs-up'),color = 'black',
  )
})

I managed to change the color based on CSS attributes as specified below. However, I have struggled to change the color based on the specific value of 'Disconnected' and 'Connected'. Any help is highly appreciated. 

span[class^="info-box-number"]{color:green}

Thank you very much.

Upvotes: 0

Views: 248

Answers (1)

St&#233;phane Laurent
St&#233;phane Laurent

Reputation: 84529

You can do:

  output$progressBox <- renderInfoBox({
    color <- ifelse(isTruthy(input$player_names), 'red', 'green')
    style <- paste0("color: ", color)
    text <- ifelse(isTruthy(input$player_names), 'Disconnected', 'Connected')
    infoBox(
      "Status", 
      value = HTML(as.character(tags$span(text, style = style))), 
      icon = icon('thumbs-up'), 
      color = 'black'
    )
  })

Upvotes: 1

Related Questions