Leaflet map not displaying correctly inside <ion-content>

I am having an issue displaying a Leaflet map in my ionic app.

Here is how it is displaying:

And here is the HTML:

<ion-content>
  <div class="map-container">
    <div class="map-frame">
      <div id="map"></div>
    </div>
  </div>
</ion-content>

When I remove the <ion-content> tags, this is how it’s displayed:

Here’s the map.css:

.map-container {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    margin: 30px;

  }

  

  .map-frame {

    border: 2px solid black;

    height: 100%;

  }

  

  #map {

    height: 100%;

  }

As you can see in the second one, the full map is displayed, but it’s still not presenting correctly (i.e. overlapping the toolbar).

Can someone please tell me how this can be resolved?

how do your css Classes look like?

1 Like

Added the map.css code above

If you inspect your Code which Div Class is the one that has the wrong small size?

For anyone having this kind of problem, just create the map inside “ionViewDidEnter” method (not in “ngAfterViewInit”, like I’ve found in many tutorials).