Geek Answers Handbook

How can I make my Shiny booklet? Development has a height = "100%", and inside navbarPage?

(Long-term user, first time)

I am working on a brilliant application that uses Leaflet. Without a navigation menu, I can make LeafletOutput 100% tall using leafletOutput('map', height='100%') .

The problem is that when I put this code inside navbarPage, it no longer works and my map stops displaying (console error below). I tried to enter CSS code by adding tags$style(type = "text/css", "#map {height: 100%};") , but this does not 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

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

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

Below is the corresponding 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 the code I used before adding a navigation that 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,...
+5
source share
1 answer

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

  • Change the string tags$style to

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

  • Wrap your object in <div class="outer"></div> . For instance,

     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,... ))
+2
source

More articles:


All Articles