Menu
I can't seem to get a (dead simple) Leaflet.map to render inside of a flexbox. I assume it may be an issue with invalidateSize
Dead simple (broken) example: jsbin
If you remove the flexbox CSS it'll work: jsbin
HTML
<body>
<div id="content">
<div id="mapPane"></div>
</div>
</body>
CSS
body {
display: flex;
flex-flow: column wrap;
}
#content {
flex: 1 1;
order: 2;
}
#mapPane {
height: 100%;
}
477
Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns.
Flexbox is a one-dimensional layout method for arranging items in rows or columns. Items flex (expand) to fill additional space or shrink to fit into smaller spaces.
Responsive Leaflet Maps If you resize the browser or view the page on a small device, the embedded map would adjust its size automatically based on your screen size. Step 1: Go to Add or Edit Map and leave the Map width column blank to make the map responsive. Step 2: click Save map and open it in browser.
There is no height for the map pane to inherit as the parent #content is getting the height from its Flex property (telling it to grow). #mapPane therefore has the correct height — 100% of 0 is 0.
Add display: flex to #content. It will still grow with its existing flex: 1 property:
#content {
display: flex;
}
Add flex: 1 to #mapPane:
#mapPane {
flex: 1;
}
$(function() {
L.map("mapPane");
});html,
body {
margin: 0px;
height: 100%;
}
body {
display: flex;
flex-flow: column wrap;
}
#content {
flex: 1 1;
order: 2;
display: flex;
}
#mapPane {
flex: 1;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" rel="stylesheet" type="text/css">
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script><script>L_PREFER_CANVAS = true;</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet-src.js"></script>
<div id="content">
<div id="mapPane"></div>
</div>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
