我正在制作一个有页脚的shiny应用程序.页脚将有一些徽标和其他信息,它应该始终显示在屏幕底部,即使在上下滚动时也是如此.该应用程序是多个选项卡,在一个选项卡上,我有一个用tmap制作的互动 map .我遇到的问题是,tmap个内置的zoom 按钮、层菜单、图例和leaflet信息显示在页脚前面,而我希望它出现在页脚后面.请参见屏幕截图.

enter image description here

下面是一个可重复使用的小例子:

library(shiny)
library(shinythemes)
library(tmap)
library(sf)

nc <-  st_read(system.file("shape/nc.shp", package="sf"), quiet = TRUE)

ui <- navbarPage(
  "App",

  theme = bslib::bs_theme(bg = "#202123", fg = "#B8BCC2"),

  tabPanel("tab", tmapOutput("map")),

  footer = fluidRow(
    tags$div(
      h4("THIS IS A FOOTER"),
      class = "footer",
      style = "position:fixed;bottom:0;width:100%;background-color: white;",
    )
  )
)

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

  tmap_mode("view")

  output$map <- renderTmap({
    tm_shape(nc) +
      tm_polygons("AREA")
  })

}

shinyApp(ui, server)

推荐答案

您可以将页脚的z-index(参见here)设置为10000,这对于大于按钮和图例来说已经足够了.

enter image description here

library(shiny)
library(shinythemes)
library(tmap)
library(sf)

nc <-
    st_read(system.file("shape/nc.shp", package = "sf"), quiet = TRUE)

ui <- navbarPage(
    "App",
    
    theme = bslib::bs_theme(bg = "#202123", fg = "#B8BCC2"),
    
    tabPanel("tab", tmapOutput("map")),
    
    footer = fluidRow(
        tags$div(
            h4("THIS IS A FOOTER"),
            class = "footer",
            style = "position:fixed;
                     bottom:0;
                     width:100%;
                     background-color: white;
                     z-index: 10000;",
        )
    )
)

server <- function(input, output, session) {
    tmap_mode("view")
    
    output$map <- renderTmap({
        tm_shape(nc) +
            tm_polygons("AREA")
    })
    
}

shinyApp(ui, server)

Html相关问答推荐

如何格式化HTML文本,使其环绕关键字

隐藏滚动条和禁用文本 Select 的CSS技术?

电话号码验证器(Angular )

通过动态div的对角线

为什么我的搜索栏会出现在WONG位置?

如何使用html和css关键帧创建动画

将表格背景图像置于行背景 colored颜色 之上

如何使用Reaction Js读取html文件中的代码

带有图标和悬停过渡的CSS按钮

高度:适合-内容不拉伸以适合内部长度

:after 伪元素没有出现,即使它有 content 属性

下划线在 Bootstrap 5 导航链接下无法正常工作

我真的需要一个容器来让行和列正常工作吗? ( bootstrap 程序 v5)

动态计算高度时 Div 不保持 1/1 纵横比

我正在使用 NVDA 并多次读取关闭按钮,但它的读取非常完美

嵌套固定定位的 Div 滚动条渗透到前景中的 Div

无法从社交栏中 Select 选项

svg 内容超过元素

用 flexbox 和 overflow 覆盖

如何计算没有根元素的先前 html 标记(lxml python3)编辑:还获取元素