语义 ui 模态内的传单地图

Leaflet map inside semantic ui modal

我正在尝试打开一个只包含地图的语义 ui 模式。它应该填满模态框的整个区域,但它看起来像 this。 这是打开模式的 javascript 代码:

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


这里是模态的 HTML 代码:

<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>

然后这个 CSS 文件被应用到页面:

#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;
}


到目前为止我尝试过的事情:


非常感谢任何 CSS 或 JS 解决方案。

似乎缺少 Leaflet CSS 文件。

还要确保为地图 div 容器指定高度。

并在显示模式后初始化您的地图或使其大小无效。