Override height of box in shiny dashboard and leaflet - css

Question

I created a dashboard using shinyDashboard and I have a map with leaflet. The box element used in shinyDashboard creates a fixed height of 400px for the map.
I would like the map to be 90vh so that it covers most of the screen, and so I wrote this on the UI file:
tabItem(tabName = "widgets",
fluidPage(
fluidRow(
tags$head(tags$style(type = "text/css",'
#geomap {
height: 90vh;
}
')),
box(title = "Geographical distribution",
leafletOutput("geomap")
)
)
)
)
Now, when I inspect the page, I can see that the property was passed onto the #geomap id, but it is overridden for some reason
!
Also, here is the node
.
I have overridden classes before successfully, so I don't understand how an ID can't be overridden. Any ideas?
Thank you!
EDIT: Here's an example code:
library(shiny)
library(shinydashboard)
library(leaflet)
server <- function(input, output, session) {
output$geomap <- renderLeaflet({
m <- leaflet(data) %>%
addProviderTiles("CartoDB.Positron")
})
}
ui <- dashboardPage(skin = "black",
dashboardHeader(title = "Test"),
dashboardSidebar(
sidebarMenu(
menuItem("Map distribution", tabName = "widgets", icon = icon("th"))
)
),
dashboardBody(
tabItems(
tabItem(tabName = "widgets",
fluidPage(
fluidRow(
tags$head(tags$style(HTML('
.col-sm-6 {
width: 100%;
}
'))),
box(title = "Geographical distribution",
leafletOutput("geomap")
)
)
)
)
)
)
)
shinyApp(ui, server)