selectInput中的选项显示在传单地图上

Question

我正在构建一个闪亮的应用程序，用户可以通过从selectInput()中选择船只类型来查看各种类型的船只。根据选择，血管将被过滤并显示在传单地图上。但是，selectInput中的选择当前显示在传单地图的下方，如下所示：

是否有某种方法可以确保选择不隐藏在传单地图上的控件下。我不想移动selectInput的位置，因为预计它旁边将有更多的过滤器。

Answer 1

通过在ui中添加以下行来修改下拉元素的z-index：

tags$head(tags$style('.selectize-dropdown {z-index: 10000}'))

使用示例in the documentation，工作代码如下所示：

library(shiny)
library(leaflet)

r_colors <- rgb(t(col2rgb(colors()) / 255))
names(r_colors) <- colors()

ui <- fluidPage(
  tags$head(tags$style('.selectize-dropdown {z-index: 10000}')),
  selectInput("select", "Select", choices = c("A", "B")),
  leafletOutput("mymap"),
  p(),
  actionButton("recalc", "New points")
)

server <- function(input, output, session) {

  points <- eventReactive(input$recalc, {
    cbind(rnorm(40) * 2 + 13, rnorm(40) + 48)
  }, ignoreNULL = FALSE)

  output$mymap <- renderLeaflet({
    leaflet() %>%
      addProviderTiles(providers$Stamen.TonerLite,
                       options = providerTileOptions(noWrap = TRUE)
      ) %>%
      addMarkers(data = points())
  })
}

shinyApp(ui, server)