Semantic UI Модальная высота слишком длинная - PullRequest
Новая
       46

Semantic UI Модальная высота слишком длинная

0 голосов
/ 23 января 2019

Я использую семантический пользовательский интерфейс для создания веб-страницы (без React, NPM или чего-либо другого, просто обычный HTML / CSS).Я пытаюсь добавить модальный на мою страницу, но он ведет себя очень странно, так как модальная высота слишком велика.У меня нет никаких других фреймворков, таких как Bootstrap, включенных в мой код.

Как это ведет себя:

Image for my code

Какон должен вести себя:

Standard Image

Версия семантического пользовательского интерфейса: 2.4.2

Установлен ли семантический пользовательский интерфейсправильно? Да, другие компоненты работают.

Мой код

HTML: 

<div id="myModal" class="ui basic modal">
        <div class="ui icon header">
            <i class="archive icon"></i>
            Archive Old Messages
        </div>
        <div class="content">
            <p>Your inbox is getting full, would you like us to enable automatic archiving of old messages?</p>
        </div>
        <div class="actions">
            <div class="ui red basic cancel inverted button">
                <i class="remove icon"></i>
                No
            </div>
            <div class="ui green ok inverted button">
                <i class="checkmark icon"></i>
                Yes
            </div>
        </div>
    </div>

JS: 

$('.ui.basic.modal')
  .modal('show')
;

Что я пробовалдо сих пор:

  1. #myModal { position: relative;}, а затем добавление идентификатора к моему модальному, как объяснено в этом ответе: https://stackoverflow.com/a/40774996/10934182
  2. body{ max-height: 100vh; }, как объяснено здесь: semantic-ui высота модального окна растяжения
  3. Код, описанный в этой скрипке (не моя скрипка): http://jsfiddle.net/MrLogical/2hda8e18/

Спасибо !!

1 Ответ

0 голосов
/ 23 января 2019

В вашем JSfiddle я заметил, что ваш div внутри .modal-content имеет min-height: 1000px.Я убрал это, и модал теперь нормальной высоты.

...