title: How can I fix bootstrap leaflet map mobile display?
body: <p>I'm using bootstrap to set up a leaflet map. Works great on browsers so far, but does not display at all on a mobile.</p>
  
  <p>Tried the invalidateSize(); work around to no avail (<a href="https://stackoverflow.com/questions/10762984/leaflet-map-not-displayed-properly-inside-tabbed-panel">Leaflet map not displayed properly inside tabbed panel</a>)</p>
  
  <p>See code below.</p>
  
  <pre><code>    &lt;body&gt;
        &lt;div class="navbar navbar-inverse navbar-fixed-top" role="navigation"&gt;
          &lt;div class="navbar-header"&gt;
            &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;/button&gt;
            &lt;a class="navbar-brand" href="http://www.url.com"&gt;hello!!!&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="navbar-collapse collapse"&gt;
            &lt;ul class="nav navbar-nav"&gt;
              &lt;li&gt; &lt;a href="#aboutModal" data-toggle="modal"&gt; &lt;i class="fa fa-connectdevelop" style="color: white"&gt;&lt;/i&gt; Info&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;&lt;!--/.navbar-collapse --&gt;
        &lt;/div&gt; &lt;!-- navbar navbar-inverse navbar-fixed-top --&gt;
  
        &lt;div id="map"&gt;&lt;/div&gt;
  
        &lt;div class="modal fade" id="aboutModal"&gt;
          &lt;div class="modal-dialog"&gt;
            &lt;div class="modal-content"&gt;
              &lt;div class="modal-body"&gt;
                &lt;ul id="aboutTabs" class="nav nav-tabs"&gt;
                  &lt;li class="active"&gt; &lt;a href="#about" data-toggle="tab"&gt;&lt;i class="fa fa-bookmark"&gt;&lt;/i&gt;About this GeoPortal&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt; &lt;a href="#disclaimer" data-toggle="tab"&gt;&lt;i class="fa fa-info-circle"&gt;&lt;/i&gt;Disclaimer&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#legend1" data-toggle="tab"&gt;&lt;i class="fa fa-barcode"&gt;&lt;/i&gt;Legend&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
                &lt;div id="aboutTabsContent" class="tab-content" style="padding-top: 10px; text-indent: 0px; -webkit-box-shadow: 0px 0px; box-shadow: 0px 0px; margin-right: autopx; margin-left: auto; margin-top: auto; margin-bottom: auto; padding-left: 0px; /* [disabled]border-color: #D1D1D1; */"&gt;
                  &lt;div class="tab-pane fade active in" id="about"&gt;
                      &lt;p&gt;This says something.&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="tab-pane fade text-danger" id="disclaimer"&gt;
                    &lt;p&gt;something here&lt;/p&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;&lt;!-- /.modal-content --&gt;
          &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
        &lt;/div&gt;&lt;!-- /.modal --&gt;
  
        &lt;script&gt;
          L.mapbox.accessToken = 'token';
            var map = L.map('map').setView([10.5063,-61.4079], 10);
            var streets = L.mapbox.tileLayer('url').addTo(map);
            var drivetimes = L.mapbox.tileLayer('url');
            var outlets = L.mapbox.tileLayer('url');
            var layer1={"Streets":streets};
            var layer2={"Drive Times":drivetimes,"Outlets":outlets};
            var layerControl=L.control.layers(layer1,layer2).addTo(map);
            map.attributionControl.setPrefix('&amp;copy;&lt;a href="http://www.myurl.com"&gt;Copyright 2006-2015. hello!!! Limited&lt;/a&gt;');
            L.control.locate().addTo(map);
  
            if(document.body.clientWidth&lt;=767){var isCollapsed=true}else{var isCollapsed=false}var sidebar=L.control.sidebar("sidebar",{closeButton:true,position:"left"}).addTo(map);
            if(navigator.appName=="Microsoft Internet Explorer"){$("input").each(function(){if($(this).val()==""&amp;&amp;$(this).attr("placeholder")!=""){$(this).val($(this).attr("placeholder"));
            $(this).focus(function(){if($(this).val()==$(this).attr("placeholder"))$(this).val("")});
            $(this).blur(function(){if($(this).val()=="")$(this).val($(this).attr("placeholder"))})}})}
        &lt;/script&gt;
      &lt;/body&gt;
  </code></pre>
  
  <p>this is the main css file:</p>
  
  <pre><code>    html, body, #map {height: 100%;width: 100%;overflow: hidden;}
      body {padding-top: 50px;}
      input[type="radio"], input[type="checkbox"] {margin: 0;}
      #loading {position: absolute; width: 220px; height: 19px; top: 50%; left: 50%; margin: -10px 0 0 -110px; z-index: 20001;}
      .leaflet-control-layers label { font-weight: normal; margin-bottom: 0px;}
      .table { margin-bottom: 0px;}
      .navbar .navbar-brand { font-weight: bold; font-size: 25px; color: #3CFF8F!important;}
      .navbar-collapse.in { overflow-y: hidden;}
      .typeahead { background-color: #FFFFFF;}
      .tt-dropdown-menu { background-color: #FFFFFF; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 4px 4px 4px 4px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); margin-top: 4px; padding: 4px 0; width: 100%; max-height: 300px; overflow: auto;}
      .tt-suggestion { font-size: 14px; line-height: 20px; padding: 3px 10px;}
      .tt-suggestion.tt-cursor { background-color: #0097CF; color: #FFFFFF; cursor: pointer;}
      .tt-suggestion p { margin: 0;}
      .tt-suggestion + .tt-suggestion { border-top: 1px solid #0097CF;}
      .typeahead-header { margin: 0 5px 5px 5px; padding: 3px 0; border-bottom: 2px solid #333;}
      .has-feedback .form-control-feedback { position: absolute; top: 0; right: 0; display: block; width: 34px; height: 34px; line-height: 34px; text-align: center;}
      .leaflet-popup-content { margin-top: 1px; margin-bottom: 1px; margin-left: 2px; margin-right: 2px; background:#000!important; font-weight:bold; font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;}
      .leaflet-popup-content-wrapper { border-radius: 0px; border-color:transparent!important; border:none; opacity:0.7; color:#fff!important; size:auto!important;}
      .leaflet-sidebar { z-index: 1020;}
      .leaflet-sidebar .close { right: 0px; top: 5px; background: transparent;}
      .leaflet-control-locate {border: 1px solid rgba(0,0,0,0.4);}
      .leaflet-control-locate a {background-color: #fff;background-position: -3px, -2px;}
      .leaflet-control-locate.active a {background-position: -33px -2px;}
      @media (max-width: 992px) { .navbar .navbar-brand {font-size: 18px; }}
      @media (max-width: 767px){ .url-break {word-break: break-all;     word-break: break-word;-webkit-hyphens: auto;hyphens: auto; }}
      @media print { .navbar {display: none !important; } .leaflet-control-container {display: none !important; }}
  </code></pre>