title: Resizing a leaflet map on container resize
body: <p>I have a <code>&lt;div&gt;</code> containing a leaflet map. Upon certain events the height of the <code>&lt;div&gt;</code> will be altered. I'd like for the map to resize to the new dimensions of its surrounding <code>&lt;div&gt;</code> so that the old center is centered in the resized smaller or larger map. I tried using the <code>invalidateSize()</code> function, but it doesn't seem to work at all. How can I resize and center the map after that <code>map-container-resize</code> event?</p>
  
  <pre><code>$mapContainer.on('map-container-resize', function () {
     map.invalidateSize(); // doesn't seem to do anything
  });
  </code></pre>
  
  <p><em>Edit to give more context:</em></p>
  
  <p>The map container is styled initially as</p>
  
  <pre><code>#map-container {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
  
      transition: height 0.5s ease-in-out;
  }
  </code></pre>
  
  <p>After a user clicks a certain button, another panel shows at the bottom of the page and the map-container's height will be reduced to something less than 100% (say 80%). </p>
  
  <p>Upon click on this button, the map-container-resize event is triggered so that I can make the map resize and center on its old (i.e. before the resizing happened) center. The map itself should then also be resized to 80% of its initial height. </p>
  
  <p>The APi doc for <code>invalidateSize</code> seemed to be what I wanted: </p>
  
  <blockquote>
    <p>"Checks if the map container size changed and updates the map if so
    [...]"</p>
  </blockquote>
  
  <p>But having a look with the output of the <code>getSize</code> function before and after the call to invalidateSize, nothing is different, the map remains at its old size.</p>