CODEWITHSUNDEEP
htmlcssrshiny
Stéphane Laurent
Stéphane Laurent

Reputation: 84529

Background color of the active tab in Shiny app

This question has been previously deleted while I was working on it. How to change the background color of the active tab in a Shiny app?

library(shiny)

ui <- fluidPage(
  tags$head(
    tags$style(HTML(css))
  ),
  tabsetPanel(
    tabPanel("t0", h2("tab 0")),
    tabPanel("t1", h2("tab 1"))
  )
)

server <- function(input, output) {}

shinyApp(ui = ui, server = server)

Upvotes: 0

Views: 473

Answers (1)

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

Reputation: 84529

Here is a way:

css <- "
.nav-tabs > li.active > a { 
    background-color: lightgrey;
}
.tab-pane.active {
    background-color: lightgrey;
    position: absolute;
    width: -webkit-fill-available;
    height: -webkit-fill-available;
}
"

library(shiny)

ui <- fluidPage(
  tags$head(
    tags$style(HTML(css))
  ),
  tabsetPanel(
    tabPanel("t0", h2("tab 0")),
    tabPanel("t1", h2("tab 1"))
  )
)

server <- function(input, output) {}

shinyApp(ui = ui, server = server)

The first part of the CSS is for the "knob" of the tab (I don't know the correct wording), and the second part is for the body of the tab.

Note that the CSS property -webkit-fill-available may not work in all browsers. It works in Chrome and Edge. Googling it should give the equivalent property name for others browsers.

Upvotes: 1

Related Questions