Popup list of selectInput is hiding behind navBarPage - shiny

Question

Please consider below ShinyApp with navBarPage & selectInput.
shinyApp(
ui = fluidPage(
selectInput("variable", "Variable:",
c("Cylinders" = "cyl",
"Transmission" = "am",
"Gears" = "gear")),
navbarPage(title = "",
tabPanel("Scene 01",
fluidRow(tableOutput("data"))
),
tabPanel("Scene 02", fluidRow()))
),
server = function(input, output) {
output$data <- renderTable({
mtcars[, c("mpg", input$variable), drop = FALSE]
}, rownames = TRUE)
}
)
As you see, when the popup-baloon of selectInput opens (i.e. when User clicks on the drop-down icon of selectInput), it hides behind the strip of navBarPage. Is there any way to bring that popup-baloon forward, instead of hiding behind the navBarPage srip.
Appreciate for your help.
Thanks,

Answer 1

You can use css to make the z-index of selectinput dropdown more than that of nav-bar header using the following tag:
tags$div(tags$style(HTML( ".selectize-dropdown, .selectize-dropdown.form-control{z-index:10000;}")))
In your app it would be as follows:
shinyApp(
ui = fluidPage(
tags$div(tags$style(HTML( ".selectize-dropdown, .selectize-dropdown.form-control{z-index:10000;}"))),
selectInput("variable", "Variable:",
c("Cylinders" = "cyl",
"Transmission" = "am",
"Gears" = "gear")),
navbarPage(title = "",
tabPanel("Scene 01",
fluidRow(tableOutput("data"))
),
tabPanel("Scene 02", fluidRow()))
),
server = function(input, output) {
output$data <- renderTable({
mtcars[, c("mpg", input$variable), drop = FALSE]
}, rownames = TRUE)
}
)
You will get something like this:
Hope it helps!