css reference when using bsilb package in ShinyApp

November 3, 2022

I want to hide a tabsetPanel in a ShinyApp. Following this answer in a Shiny issue I can do that just fine like this:

library(shiny)

ui <- fluidPage(
 
  tags$style("#inTabset { display:none; }"), #This works 
  sidebarLayout(
    sidebarPanel(
      sliderInput("controller", "Controller", 1, 3, 1)
    ),
    mainPanel(
      tabsetPanel(id = "inTabset",
                  tabPanel(title = "Panel 1", value = "panel1", "Panel 1 content"),
                  tabPanel(title = "Panel 2", value = "panel2", "Panel 2 content"),
                  tabPanel(title = "Panel 3", value = "panel3", "Panel 3 content")
      )
    )
  )
)

server <- function(input, output, session) {
  observeEvent(input$controller, {
    updateTabsetPanel(session, "inTabset", selected = paste0("panel", input$controller))
  })
}

shinyApp(ui, server)

However, I’m using bslib for theming. This library seems to modify the css selectors involved and I can’t seem to figure out how to modify the tabsetPanel selector to hide it:

library(shiny)
library(bslib)

ui <- fluidPage(
  theme = bs_theme(primary = "#EA80FC"),
  tags$style("#inTabset { display:none; }"), #This no longer works, 
  sidebarLayout(
    sidebarPanel(
      sliderInput("controller", "Controller", 1, 3, 1)
    ),
    mainPanel(
      tabsetPanel(id = "inTabset",
                  tabPanel(title = "Panel 1", value = "panel1", "Panel 1 content"),
                  tabPanel(title = "Panel 2", value = "panel2", "Panel 2 content"),
                  tabPanel(title = "Panel 3", value = "panel3", "Panel 3 content")
      )
    )
  )
)

server <- function(input, output, session) {
  observeEvent(input$controller, {
    updateTabsetPanel(session, "inTabset", selected = paste0("panel", input$controller))
  })
}

shinyApp(ui, server)

I tried inspecting and playing with the elements shown in chrome’s dev console to no avail. So, how do I reference this element when using bslib?

>Solution :

Not sure what’s the reason you want to hide the tabs via CSS when you could achieve the same result via type="hidden" which also seems to work fine with bslib:

library(shiny)
library(bslib)

ui <- fluidPage(
  theme = bs_theme(primary = "#EA80FC"),
  sidebarLayout(
    sidebarPanel(
      sliderInput("controller", "Controller", 1, 3, 1)
    ),
    mainPanel(
      tabsetPanel(id = "inTabset",
                  type = "hidden",
                  tabPanel(title = "Panel 1", value = "panel1", "Panel 1 content"),
                  tabPanel(title = "Panel 2", value = "panel2", "Panel 2 content"),
                  tabPanel(title = "Panel 3", value = "panel3", "Panel 3 content")
      )
    )
  )
)

server <- function(input, output, session) {
  observeEvent(input$controller, {
    updateTabsetPanel(session, "inTabset", selected = paste0("panel", input$controller))
  })
}

shinyApp(ui, server)
#> 
#> Listening on http://127.0.0.1:3626