Dropdowns not extending in shiny tabPanel

Question

When a dropdown box is included as part of a tab panel in a shiny app, it doesn't behave in the same way as outside of a tab panel. Outside of a tab panel, when it is active, it extends beyond the element that contains it, but as a tab panel it is constrained, making it very difficult to use.

I would like to be able to use tab panels in a sidebarPanel, can anyone suggest how to get them to behave?

In a tab panel (problematic)

library(shiny)

runApp(list(
  ui = pageWithSidebar(
    headerPanel("Dropdown issues in panels"),
    sidebarPanel(
      tabsetPanel(id="tabsetLeft",
                  tabPanel("Panel1",
                           selectInput("select1", "Select", 1:5)
                  ))),
    mainPanel()),
  server = function(input, output) {}))

Outside a tab panel (how I want it work)

library(shiny)

runApp(list(
  ui = pageWithSidebar(
    headerPanel("Dropdown issues in panels"),
    sidebarPanel(
      selectInput("select1", "Select", 1:5)),
    mainPanel()),
  server = function(input, output) {}))

Answer 1

You need to add some css. The overflow on the .tab-content needs to be visible"

.tab-content {
  overflow: visible;
}

You can add this in a styles.css in a www folder in your app directory or inline:

library(shiny)

runApp(list(
    ui = pageWithSidebar(
        headerPanel("Dropdown issues in panels"),
        sidebarPanel(
            tabsetPanel(id="tabsetLeft",
                        tabPanel("Panel1",
                                 selectInput("select1", "Select", 1:5)
                        ))),
        mainPanel(tags$head(tags$style(type="text/css", ".tab-content {overflow: visible;}")))),
    server = function(input, output) {}))