Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Removing White Space between Shiny Dashboard Header and Leaflet Map

I have a Shiny app that displays a leaflet map. I am trying to remove white space between the Shiny dashboard header and the map. I also want to remove white space on the side margins. I suspect that doing this requires modifying margins or padding through CSS but I have not found the solution.

Here's the code for a simplified version of my app -

```{r}
ui <- navbarPage("Example Page", id = "nav",
       tabPanel("Some Header",
                tags$style(type = "text/css", "#map {height: 
                calc(100vh - 70px) !important;}"), 
                  leafletOutput("map")))

server <- function(input, output, session) {
             output$map <- renderLeaflet({
            leaflet() %>%
            addTiles() %>% 
            setView(lng = -93.85, lat = 37.45, zoom = 5)})
}

shinyApp(ui, server)

```

Here's an image of the resulting app. I want to know how I can modify this code to remove all whitespace.

Example_App

enter image description here

like image 788
big parma Avatar asked Nov 26 '25 19:11

big parma


1 Answers

p0bs, your comment put me on the right track. Here's the code I used to reformat this Shiny app so that there's no whitespace -

```{r}
ui <- navbarPage("Example Page", id = "nav",
       tabPanel("Some Header",
                tags$style(type = "text/css", "#map {height: calc(100vh - 
53px) !important;}"), 
                  leafletOutput("map")),
         tags$style(type = "text/css", ".container-fluid {padding-left:0px;
                    padding-right:0px;}"),
         tags$style(type = "text/css", ".navbar {margin-bottom: .5px;}"),
        tags$style(type = "text/css", ".container-fluid .navbar-header 
.navbar-brand {margin-left: 0px;}"))

server <- function(input, output, session) {
output$map <- renderLeaflet({
leaflet() %>%
  addTiles() %>% 
  setView(lng = -93.85, lat = 37.45, zoom = 5)})
}

shinyApp(ui, server)
```

Here's an image of the result -

enter image description here

like image 59
big parma Avatar answered Nov 29 '25 08:11

big parma



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!