Question

我正在尝试打开一个语义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;
}

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

从模态中删除除地图<div>之外的所有内容。
将style="width:250px;height:250px;"赋予模式。
将style="width:250px;height:250px;"赋予模态内的元素（以及模态本身）。
更改了地图元素的css display类型（尝试了所有可能的值）。
更改了地图元素的css position类型（尝试了所有可能的值）。

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

Answer 1

看起来像缺少Leaflet CSS文件。

还要确保为地图div容器设置一个高度。

并在显示模态后初始化地图或使地图大小无效。

语义ui模态中的传单地图

1 个答案: