在navbarPage中,如何让我的Shiny leafletOutput具有height ="100%"？

Question

(长时间用户,第一次海报)

我正在使用一个使用Leaflet包的Shiny App.没有导航菜单,我可以通过使用使LeafletOutput具有100%的高度leafletOutput('map', height='100%').

问题是,当我将此代码放在navbarPage中时,它不再有效,我的地图停止显示(下面的控制台错误).我尝试通过添加注入CSS代码,tags$style(type = "text/css", "#map {height: 100%};")但似乎没有任何影响.如果我将其更改为tags$style(type = "text/css", #map {height: 100% !important};"),代码会再次中断,我在控制台中得到相同的错误代码:

Uncaught TypeError: Cannot read property 'clearLayers' of undefined
Uncaught TypeError: Cannot read property 'addLayer' of undefined
Uncaught TypeError: Cannot read property 'clear' of undefined
Uncaught TypeError: Cannot read property 'add' of undefined

这些错误分别在第814,726,979和1095行的leaflet.js上抛出.这些行的代码如下:

第814行:this.layerManager.clearLayers("shape");
第726行:this.layerManager.addLayer(layer, category, thisId, thisGroup);
第979 this.controls.clear();
行:第1095行:this.controls.add(legend, options.layerId);

以下是我的UI.R文件中的相关代码:

navbarPage("DHIS Data Explorer",
       tabPanel("Plot",
                tags$style(type = "text/css", "html, body, #map {width:100%;height:100%}"),
                leafletOutput('map', height = "100%"), #this height variable is what breaks the code.
                absolutePanel(top = 60, right = 10, draggable=TRUE,...

这里是我在添加导航之前使用的代码,工作正常:

bootstrapPage(
  tags$style(type = "text/css", "html, body {width:100%;height:100%}"),
  leafletOutput("map", width = "100%", height = "100%"),
  absolutePanel(top = 60, right = 10, draggable=TRUE,...

Answer 1

我直接从SuperZip示例中复制了它。您只需要将所有内容都包装在 a 中<div>并相应地设置 css。这可能是您的解决方案：

1. 将您的tags$style线路更改为

   tags$style(type = "text/css", ".outer {position: fixed; top: 41px; left: 0; right: 0; bottom: 0; overflow: hidden; padding: 0}")
   

2. 将您的对象包裹在<div class="outer"></div>. 例如，

   bootstrapPage(div(class="outer",
       tags$style(type = "text/css", ".outer {position: fixed; top: 41px; left: 0; right: 0; bottom: 0; overflow: hidden; padding: 0}"),
       leafletOutput("map", width = "100%", height = "100%"),
       absolutePanel(top = 60, right = 10, draggable=TRUE,...
   ))