I'm trying to built an app that shows a leaflet map. People that'll use the app mostly do it from mobile devices - so it would be convenient to offer the map on the entire screen. You can see the app here: https://js1984.shinyapps.io/stackoverflow/
It works fine for width with leafletOutput("mymap", width = "100%")
, however I can't set height to leafletOutput("mymap", width = "100%", height = "100%")
: the map will disappear when I run the app... Setting height to a fixed value works fine, but is not an option as you might imagine.
All solutions I found so far did not work for me: like setting height: 100% in the CSS:
html, body, #mymap {
height:100%;
width:100%;
padding:0px;
margin:0px;
}
The UI part of the app looks like this:
ui <- navbarPage(title = "test",
collapsible = T,
position= "static-top",
inverse = T,
#####################################
# the tab panel that includes the MAP
#####################################
tabPanel("Map",
includeCSS(path="www/bootstrap.css"),
leafletOutput("mymap", width = "100%")
),
#####################################
# other tab panels
#####################################
tabPanel("Fri",
fluidRow(
includeCSS(path="www/bootstrap.css"),
column(6,
offset = 3,
wellPanel(
checkboxGroupInput("freitag",
h3("Freitag"),
list_fr,
selected = 1
)
)
)
)
),
tabPanel("Sat",
fluidRow(
column(6,
offset = 3,
wellPanel(
checkboxGroupInput("samstag",
h3("Samstag"),
list_sa
)
)
)
)
),
tabPanel("Sun",
fluidRow(
column(6,
offset = 3,
wellPanel(
checkboxGroupInput("sonntag",
h3("Sonntag"),
list_so
)
)
)
)
),
tabPanel("Mon",
fluidRow(
column(6,
offset = 3,
wellPanel(
checkboxGroupInput("montag",
h3("Montag"),
list_mo
)
)
)
)
),
tabPanel("Tues",
fluidRow(
column(6,
offset = 3,
wellPanel(
checkboxGroupInput("dienstag",
h3("Dienstag"),
list_di
)
)
)
)
)
)
As pointed out by Dogan Askan (thanks!) in this comment a solution using calc() and the window hight worked for me. See this answer for a more elaborated example.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With