Leaflet map not showing properly in bootstrap 3.0 modal

by

I think what is happening is that, when the map is created, the container width/height for your `map-canvas’ element has not yet been adjusted to the width/height of the modal dialog. This causes the map size to be incorrect (smaller) than what it should be.

You can fix this by calling map.invalidateSize(). This will work to re-adjust the width/height bounds of the L.Map’s container.

You can automatically call this by hooking into the event where the Bootstrap modal becomes shown.

$('#myModal').on('show.bs.modal', function(){
  setTimeout(function() {
    map.invalidateSize();
  }, 10);
 });

Insert this code into your JavaScript. When the modal is shown, the map will then invalidate its size. The timeout is because there may be some animation/transition time for the modal to display and be added to the DOM.

More Related Contents:

  1. Bootstrap 3 with remote Modal
  2. Twitter bootstrap modal-backdrop doesn’t disappear
  3. How to use CKEditor in a Bootstrap Modal?
  4. how to destroy bootstrap modal window completely?
  5. Twitter Bootstrap modal blocks text input field
  6. My Bootstrap Window Became to large?
  7. Bootstrap Rows and Columns – Do I need to use row?
  8. How to dismiss a Twitter Bootstrap popover by clicking outside?
  9. How to namespace Twitter Bootstrap so styles don’t conflict
  10. Fluid or fixed grid system, in responsive design, based on Twitter Bootstrap
  11. Getting Bootstrap’s modal content from another page
  12. Bootstrap: Collapse other sections when one is expanded
  13. Disable click outside of bootstrap modal area to close modal [duplicate]
  14. Updating Bootstrap to version 3 – what do I have to do?
  15. Using Bootstrap Modal window as PartialView
  16. How do I insert a django form in twitter-bootstrap modal window?
  17. Bootstrap – row can I have columns add up to more then 12?
  18. Bootstrap tooltips not working
  19. Wrapping bootstrap columns in extra div
  20. Calling a function on Bootstrap modal open
  21. How to create new breakpoints in bootstrap 4 using CDN?
  22. Bootstrap 4 Multiple fixed-top navbars
  23. Bootstrap 3 Gutter Size
  24. Different slide duration for each item on bootstrap 3.1 carousel
  25. Bootstrap – I don’t want columns to have the same height
  26. How to handle the modal closing event in Twitter Bootstrap?
  27. Is there a hosted version of Twitter Bootstrap? [closed]
  28. Binding to Collapse event in Twitter Bootstrap 3
  29. keep the current tab active with twitter bootstrap after a page reload?
  30. Twitter Bootstrap: Print content of modal window

Leave a Comment