Change the color of the same box based on of condition in shiny app

Question

I have the shiny app below in which I try to color the boxes based on 2 if conditions but I cannot make it change.

## app.R ##
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(

    uiOutput("box1"),

    uiOutput("box2")
    
  )
)


server <- function(input, output) { 
  
  output$box1<-renderUI({
    if(nrow(iris)==150){
      tags$style(
        type = 'text/css',
        ".box-danger{border-top-style: none; border-left-color: green; border-left-style: solid;}"
      )
      box(
        title = "title", 
        closable = TRUE, 
        width = 10,
        status = "danger", 
        solidHeader = F, 
        collapsible = TRUE,
        collapsed = T
      )
    }
    else{
      tags$style(
        type = 'text/css',
        ".box-danger{border-top-style: none; border-left-color: red; border-left-style: solid;}"
      )
      box(
        title = "title", 
        closable = TRUE, 
        width = 10,
        status = "danger", 
        solidHeader = F, 
        collapsible = TRUE,
        collapsed = T
      )
    }
  })
  output$box2<-renderUI({
    if(nrow(mtcars)==32){
      tags$style(
        type = 'text/css',
        ".box-danger{border-top-style: none; border-left-color: green; border-left-style: solid;}"
      )
      box(
        title = "title", 
        closable = TRUE, 
        width = 10,
        status = "danger", 
        solidHeader = F, 
        collapsible = TRUE,
        collapsed = T
      )
    }
    else{
      tags$style(
        type = 'text/css',
        ".box-danger{border-top-style: none; border-left-color: red; border-left-style: solid;}"
      )
      box(
        title = "title", 
        closable = TRUE, 
        width = 10,
        status = "danger", 
        solidHeader = F, 
        collapsible = TRUE,
        collapsed = T
      )
    }
    
    
  })
  }

shinyApp(ui, server)

score 2 · Accepted Answer · answered Jan 04 '23 at 19:01

How about this solution. Use the id argument of the box and use an #-selector in CSS? THe id could be used to make the box respond to click-events. But you can just ignore it. By changing the id depending on the if condition, you can distinguish the boxes in HTML.

I also moved the CSS to the HTML header and marked the content as HTML(). See also Change default CSS styling of shinydashboardPlus::descriptionBlock()

## app.R ##
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    tags$head(
      tags$style(HTML("
    #mybox1Red{border-top-style: none; border-left-color: green; border-left-style: solid;}
    #mybox1Green{border-top-style: none; border-left-color: red; border-left-style: solid;}
    #mybox2Red{border-top-style: none; border-left-color: green; border-left-style: solid;}
    #mybox2Green{border-top-style: none; border-left-color: red; border-left-style: solid;}
    "))
    ),
    
    uiOutput("box1"),
    
    uiOutput("box2")
  )
)


server <- function(input, output) { 
  
  output$box1<-renderUI({
    if(nrow(iris)==150) {
      box(
        id="mybox1Red",
        title = "title", 
        closable = TRUE, 
        width = 10,
        status = "danger", 
        solidHeader = F, 
        collapsible = TRUE,
        collapsed = T
      )
    }
    else{
      tags$style(
        type = 'text/css',
        "#mybox1Green{border-top-style: none; border-left-color: red; border-left-style: solid;}"
      )
      box(
        id="mybox1Green",
        title = "title", 
        closable = TRUE, 
        width = 10,
        status = "danger", 
        solidHeader = F, 
        collapsible = TRUE,
        collapsed = T
      )
    }
  })
  output$box2<-renderUI({
    if(nrow(mtcars)==32){
      tags$style(
        type = 'text/css',
        "#mybox2Red{border-top-style: none; border-left-color: green; border-left-style: solid;}"
      )
      box(
        id="mybox2Red",
        title = "title", 
        closable = TRUE, 
        width = 10,
        status = "danger", 
        solidHeader = F, 
        collapsible = TRUE,
        collapsed = T
      )
    }
    else{
      tags$style(
        type = 'text/css',
        "#mybox2Green{border-top-style: none; border-left-color: red; border-left-style: solid;}"
      )
      box(
        id="mybox2Green",
        title = "title", 
        closable = TRUE, 
        width = 10,
        status = "danger", 
        solidHeader = F, 
        collapsible = TRUE,
        collapsed = T
      )
    }
  })
}

shinyApp(ui, server)

that is related to your answer https://stackoverflow.com/questions/75019944/color-box-based-on-the-value-which-comes-from-a-widget-inside-the-box-in-a-s — firmo23, Jan 05 '23 at 16:32

Change the color of the same box based on of condition in shiny app

1 Answers1