Geek Answers Handbook

Sheet map in flexbox layout

I can't seem to (dead simple) Leaflet.map render inside flexbox . I assume this may be a problem with invalidateSize

Dead simple (broken) example: jsbin
If you remove the flexbox CSS, it will 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%; }
+7
html css flexbox leaflet
source share
1 answer

Flex power is now with you

The height of the map is not inherited, as the parent #content gets the height from the Flex property (saying that it is growing). #mapPane therefore has the correct height - 100% of 0 is 0 .

Bring a map to the world of Flex

  • Add display: flex to #content . It will grow with the existing flex: 1 property:

     #content { display: flex; }

  • Add flex: 1 to #mapPane :

     #mapPane { flex: 1; }

Full example

 $(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>
+15
source share

More articles:


All Articles