Листовка внутри модального семантического интерфейса - PullRequest
Новая
       9

Листовка внутри модального семантического интерфейса

0 голосов
/ 30 июня 2019

Я пытаюсь открыть модальный семантический интерфейс, который содержит только карту.Предполагается, что он заполняет всю область модальной зоны, но выглядит как 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;
}


То, что я пробовал до сих пор:

  • Удалите все из модальных, кромеmap <div>.
  • Дайте style="width:250px;height:250px;" модалу.
  • Дайте style="width:250px;height:250px;" самому элементу внутри модала (и самому модалу).
  • Изменено CSSdisplay тип элемента карты (пробовал каждое возможное значение).
  • Изменен тип элемента карты css position (пробовал каждое возможное значение).


Любое решение CSS или JS приветствуется.

1 Ответ

0 голосов
/ 30 июня 2019

Похоже, отсутствует файл листовки CSS.

Также убедитесь, что вы указали высоту для контейнера div вашей карты.

И чтобы инициализировать вашу карту или сделать недействительным ее размер, как только ваш модал будет показан.

...