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 10

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