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