css reference when using bsilb package in ShinyApp-CodePudding

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?

CodePudding user response：

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