UIKit v3 липкий элемент внутри модального? - PullRequest
0 голосов
/ 08 июня 2018

Я хочу иметь элемент uk-sticky внутри модального uk-modal-full, но он не ведет себя липко.Когда я прокручиваю модал, элемент прокручивается за пределы экрана.

<div uk-modal="bg-close: false" class="uk-modal-full">
    <div class="uk-modal-dialog uk-modal-body">
        <button class="uk-modal-close-full" uk-close></button>
        <h2 class="uk-modal-title">Modal Title</h2>
        <div uk-sticky>
            <!-- Sticky content here. -->
        </div>
        <div>
           <!-- Other content here. -->
        </div>
    </div>
</div>

Я также пытался использовать опцию bottom: true.

<div uk-modal="bg-close: false" class="uk-modal-full">
    <div class="uk-modal-dialog uk-modal-body">
        <button class="uk-modal-close-full" uk-close></button>
        <h2 class="uk-modal-title">Modal Title</h2>
        <div uk-sticky="bottom: true">
            <!-- Sticky content here. -->
        </div>
        <div>
           <!-- Other content here. -->
        </div>
    </div>
</div>

Возможно ли иметь липкийэлемент внутри модального с UIKit?

ОБНОВЛЕНИЕ:

Я протестировал наличие элемента uk-sticky непосредственно внутри uk-modal div и сработал.

<div uk-modal="bg-close: false" class="uk-modal-full">
    <div uk-sticky>
        <h1>Testing Sticky</h1>
    </div>
    <div class="uk-modal-dialog uk-modal-body">
        <button class="uk-modal-close-full" uk-close></button>
        <h2 class="uk-modal-title">Modal Title</h2>
        <div uk-sticky>
            <!-- Sticky content here. -->
        </div>
        <div>
           <!-- Other content here. -->
        </div>
    </div>
</div>

Однако это не совсем то, что мне нужно, потому что мне нужно, чтобы содержимое находилось во внутреннем div с классом uk-modal-dialog uk-modal-full;в противном случае нет отступов или полей, и это не выглядит хорошо.

1 Ответ

0 голосов
/ 08 июня 2018

В конце концов я получил какое-то нежелательное решение, но оно работает.

<div uk-modal="bg-close: false" class="uk-modal-full">
    <!-- .app-modal-sticky-header is a class I had to use -->
    <!-- in order to apply the background color obtained -->
    <!-- from .uk-modal-dialog. -->
    <div class="uk-modal-body app-modal-sticky-header" uk-sticky>
        <button class="uk-modal-close-full" uk-close></button>
        <h2 class="uk-modal-title">Modal Title</h2>
        <!-- Sticky content here. -->
    </div>
    <div class="uk-modal-dialog uk-modal-body">
        <!-- Scrollable content here. -->
    </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...