Leaflet 控件以闪亮的方式覆盖 navbarMenu答案

【问题标题】：Leaflet controls overlay navbarMenu in shinyLeaflet 控件以闪亮的方式覆盖 navbarMenu
【发布时间】：2018-03-06 04:14:20
【问题描述】：

在shiny navbarPage 应用程序中，leaflet +- 控件覆盖了navbarMenu 内容，使其难以阅读（用户可能必须调整浏览器窗口的大小才能阅读菜单）。这是一个错误吗？有没有办法将 +- 控件移到后台？

library(leaflet)
library(shiny)

ui <- navbarPage(NULL,
  navbarMenu("Menu",
    tabPanel("Menu Item 1", leafletOutput("map")),
    tabPanel("Menu Item 2"),
    tabPanel("Menu Item 3")
  )
)

server <- function(input, output, session) {
  output$map <- renderLeaflet({
    leaflet() %>% addTiles()
  })
}

shinyApp(ui, server)

【问题讨论】：

也许您可以更改缩放控件的位置。见stackoverflow.com/questions/35543814/…

标签： r shiny leaflet

【解决方案1】：

有一个技巧可以通过更改 +- 控件的 z-index 值将 +- 控件移到下拉菜单后面。

library(leaflet)
library(shiny)

ui <- navbarPage(NULL,
  navbarMenu("Menu",
    tabPanel("Menu Item 1", leafletOutput("map")),
    tabPanel("Menu Item 2"),
    tabPanel("Menu Item 3")
  ),
  tags$head(tags$style(".leaflet-top {z-index:999!important;}"))
)

server <- function(input, output, session) {
  output$map <- renderLeaflet({
    leaflet() %>% addTiles()
  })
}

shinyApp(ui, server)

【讨论】：