How can I make my Shiny leafletOutput have height="100%" while inside a navbarPage?

Question

(Long time user, first time poster)

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%').

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

These errors are thrown 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 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,...

Answer 1

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. Change your tags$style line to

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

2. Wrap your object in the <div class="outer"></div>. For example,

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