css - How to make map full-size in R Shiny?

Question

I saw similar issue here on SO (How to get Leaflet for R use 100% of Shiny dashboard height) and this solution worked for me when I used shinydashboard. Now, I changed to bs4Dash library (version 2.0.0 downloaded from GitHub) and this solution doesn't work. Crucial code is here:

bs4Dash::dashboardBody(
  mapboxer::mapboxerOutput("map")
)

and CSS:

#map { 
  height: calc(100vh - 57px) !important;
}

When using this I can see margin(?) on the right side of the map:

I can't remove this margin at all.

When I add vw to CSS:

#map { 
  height: calc(100vh - 57px) !important;
  width: calc(100vw - 73.594px) !important;
}

then this strange margin disappears at all and map is now full size but when I open sidebar on the left and map moves right then scroll bars show up on the right and bottom (which is really annoying):

I tried many CSS combinations to make it work properly but none of them works. All was fine in shinydashboardPlus but in bs4Dash it's not working as before. I also checked this solutions: http://bl.ocks.org/d3noob/7654694 but it's still not a good option.

question from:https://stackoverflow.com/questions/65846266/how-to-make-map-full-size-in-r-shiny

Answer 1

I've finally found a solution for making mapbox fullsize. I added this chunk of code to CSS:

#map { 
       height: calc(100vh - 57px) !important; 
       width: calc(100vw - 73.594px) !important; 
     }

.wrapper { 
       overflow-x: hidden; 
       overflow-y: auto; 
     }

Thanks to this code, when you open the sidebar no scroll bars appear on the bottom and on the right side and everything works smoothly (ok, text 'Mapbox' and map description on the right-bottom also moves when sidebar is opened but I don't think it's an issue here). I've noticed that those .wrapper style options were default in shinydashboardPlus package but not in bs4Dash so I needed to add them to CSS.

So depending on shiny package and sometimes a map provider there's a need to make some minor changes to CSS code in order to make map fullsize and avoid scroll bars.