Shiny: How to change a background colour of a column?

I think you can add style to an element; something like this:

column(3, style = "background-color:#4d3a7d;", ...)

Hope this helps


This can also be accomplished reactively with the shinyjs package. You can assign an "id" to your column and add/remove/toggle a CSS class in response to the UI. Modifying the example in the 'shinyjs' docs:

if (interactive()) {
  library(shiny)
  library(shinyjs)
  shinyApp(
    ui = fluidPage(
      useShinyjs(), # Set up shinyjs

      inlineCSS(list(.red = "background: red",
                     .blue = "background: blue")),
      fluidRow(
        column(3, id = "col1",
         actionButton("btn1", "Click me"),
        ),
        column(6, id = "col2",
               actionButton("btn2", "Click me too")
        )
      )
    ),
    server = function(input, output) {
      observeEvent(input$btn1, {
        toggleClass("col1", "red")
      })
      observeEvent(input$btn2, {
        toggleClass("col2", "blue")
    })
    }
  )
}

Tags:

R

Shiny