selectInput 中的选项出现在传单地图上答案

【问题标题】：Choices in selectInput to appear over a Leaflet MapselectInput 中的选项出现在传单地图上
【发布时间】：2018-06-28 07:40:15
【问题描述】：

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

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

【问题讨论】：

标签： r shiny selectize.js r-leaflet

【解决方案1】：

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

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

使用示例here，工作代码如下所示：

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)

【讨论】：