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

Question

请考虑以下带有 navBarPage 和 selectInput 的 ShinyApp。

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 的 strip 后面。有什么方法可以让弹出气球向前移动，而不是隐藏在 navBarPage srip 后面。

感谢您的帮助。

谢谢，

Answer 1

您可以使用 css 使用以下标记使 selectinput 下拉列表的 z-index 大于导航栏标题的 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)
      }
    )

你会得到这样的东西:

希望对您有所帮助!