CODEWITHSUNDEEP
shiny
Bogaso
Bogaso

Reputation: 3308

Popup list of selectInput is hiding behind navBarPage

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,

Upvotes: 2

Views: 884

Answers (1)

SBista
SBista

Reputation: 7694

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:

enter image description here

Hope it helps!

Upvotes: 6

Related Questions