我怎样才能让我的 Shiny 传单输出的高度=“100%"?在导航栏页面内? [英] How can I make my Shiny leafletOutput have height="100%" while inside a navbarPage?

问题描述

(老用户，第一次发帖)

(Long time user, first time poster)

我正在开发一个使用 Leaflet 包的 Shiny 应用程序.如果没有导航菜单，我可以使用 leafletOutput('map', height='100%') 使 LeafletOutput 具有 100% 的高度.

I'm working on a Shiny App that uses the Leaflet package. Without a navigation menu, I am able to make the LeafletOutput have 100% height by using leafletOutput('map', height='100%').

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

The problem is that when I place this code inside a navbarPage, it no longer works and my map stops displaying (console error below). I've tried injecting CSS code by adding tags$style(type = "text/css", "#map {height: 100%};") but that doesn't seem to have any effect. If I change this to tags$style(type = "text/css", #map {height: 100% !important};"), the code breaks again and I get the same error code in my console:

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

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

These errors are thrown on leaflet.js on lines 814, 726, 979 and 1095 respectively. The code for these lines is as follows:

第 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 文件中的相关代码:

Below is the relevant code from my UI.R file:

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,...

这是我在添加导航之前使用的代码，效果很好:

And here is code I was using before adding navigation, which works fine:

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,...

推荐答案

我直接从 SuperZip 示例.您只需将所有内容包装在 <div> 中并相应地设置 css.这里可能是适合您的解决方案:

I copied this directly from the SuperZip example. You just have to wrap everything in a <div> and set up css accordingly. Here might be a solution for you:

1. 将您的 tags$style 行更改为

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

将您的对象包装在 <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,...
))

这篇关于我怎样才能让我的 Shiny 传单输出的高度=“100%"?在导航栏页面内?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！