Leaflet map inside semantic ui modal

Question

I'm trying to open a semantic ui modal that contains nothing but a map. It's supposed to fill the entire area of the modal,but it looks like this. Here is the javascript code that opens up the modal:

function show_map_modal() {
    $('.mapmodal').modal('show');
}

And here is the HTML code for the modal:

<div class="ui  modal mapmodal">
        <div class="ui icon header">
            <i class="microchip icon"></i>
            <div class="edit-form-title">Select Location</div>
        </div>
        <div class="content">
            <div class="ui segment">
                <div class="ui grid">
                    <div class="column">
                        <div id="map" class="map" style="width:250px;height:250px;"></div>
                    </div>
                </div>
            </div>

        </div>        
    </div>

And there this CSS file is applied to the page:

#map,.map {
    border-radius: 0.5em;        
    z-index: 1;
}
.leaflet-container {
    font-family: Sahel-FD !important;
}
.leaflet-popup-content {
    margin: 0 !important;
    width: 250px !important;
}
.leaflet-popup-content-wrapper{
    border-radius:3px !important;
    display:contents;

}
.leaflet-popup-close-button{
    display:none;
}

Things that i have tried so far:

• Remove everything from modal but the map <div>.
• Give style="width:250px;height:250px;" to the modal.
• Give style="width:250px;height:250px;" to very element inside modal(and the modal itself).
• Changed the css display type of the map element(tried every possible value).
• Changed the css position type of the map element(tried every possible value).

Any CSS or JS solution is greatly appreciated.

Answer 1

Looks like missing Leaflet CSS file.

Also make sure to give a height to your map div container.

And to initialize your map or invalidate its size once your modal is shown.