Leaflet控件覆盖navbarMenu闪亮

Posted 2021-05-03

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

答案

通过更改+ - 控件的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)