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

Question

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

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

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

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

Choices in selectInput to appear over a Leaflet Map

r

shiny

selectize.js

r-leaflet