语义 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;
}
到目前为止我尝试过的事情:
- 从模态中删除除地图之外的所有内容
<div>
。
- 给模态
style="width:250px;height:250px;"
。
- 将
style="width:250px;height:250px;"
赋予模态内部的非常元素(以及模态本身)。
- 更改了地图元素的 css
display
类型(尝试了所有可能的值)。
- 更改了地图元素的 css
position
类型(尝试了所有可能的值)。
非常感谢任何 CSS 或 JS 解决方案。
似乎缺少 Leaflet CSS 文件。
还要确保为地图 div 容器指定高度。
并在显示模式后初始化您的地图或使其大小无效。
我正在尝试打开一个只包含地图的语义 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 解决方案。
似乎缺少 Leaflet CSS 文件。
还要确保为地图 div 容器指定高度。
并在显示模式后初始化您的地图或使其大小无效。