selectInput的弹出列表隐藏在navBarPage后面

Question

请使用navBarPage＆amp ;;考虑下面的ShinyApp。 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)
  }
)

如您所见，当selectInput的弹出气球打开时（即当用户点击selectInput的下拉图标时），它隐藏在navBarPage的条带后面。有没有办法让那个弹出气球前进，而不是躲在navBarPage srip后面。

感谢您的帮助。

谢谢，

Answer 1

您可以使用css使用以下标记使selectinput下拉列表的z-index多于导航栏标题的下拉列表：

tags$div(tags$style(HTML( ".selectize-dropdown, .selectize-dropdown.form-control{z-index:10000;}")))

在您的应用中，它将如下：

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)
      }
    )

你会得到这样的东西：

希望它有所帮助！