html - Leaflet map in a flexbox layout -
i can't seem (dead simple) leaflet.map render inside of flexbox. assume may issue invalidatesize
dead simple (broken) example: jsbin
if remove 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%; }
the power of flex has now
there no height map pane inherit parent #content getting height flex property (telling grow). #mappane therefore has correct height — 100% of 0 0.
bring map pane flex world
add
display: flex#content. still grow existingflex: 1property:#content { display: flex; }add
flex: 1#mappane:#mappane { flex: 1; }
complete 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="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery.min.js"></script> <script>l_prefer_canvas = true;</script> <script src="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet-src.js"></script> <div id="content"> <div id="mappane"></div> </div>
Comments
Post a Comment