Search code examples
cssshinybslib

css reference when using bsilb package in ShinyApp


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