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 的popup-baloon 打开时（即当用户单击selectInput 的下拉图标时），它隐藏在navBarPage 的条带后面。有什么办法可以使弹出气球向前移动，而不是隐藏在导航栏页面后面。

感谢您的帮助。

谢谢，

Answer 1

您可以使用 cssz-index使用以下标签使selectinput 下拉列表比导航栏标题的下拉列表更多：

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

你会得到这样的东西：

希望能帮助到你！