Clarity Modal внутри stackview перекрывает элементы пользовательского интерфейса - PullRequest
Новая
       16

Clarity Modal внутри stackview перекрывает элементы пользовательского интерфейса

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

У меня есть модальность ясности, которая находится под стеком-блок-контентом. Когда я открываю этот модал, он перекрывает все остальные элементы интерфейса.

Я пытался установить z-index на очень большое число, но все равно это не сработало. 

<dt class="stack-block-label">Label 2</dt>
    <dd class="stack-block-content">
      <button class="btn btn-sm" (click)="basic=true">Click This</button>

      <clr-modal [(clrModalOpen)]="basic">
          <h3 class="modal-title">I have a nice title</h3>
          <div class="modal-body">
              <p>But not much to say...</p>
          </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-outline" (click)="basic = false">Cancel</button>
              <button type="button" class="btn btn-primary" (click)="basic = false">Ok</button>
          </div>
      </clr-modal>
    </dd>
    <div class="stack-children">
        <div class="stack-block">
            <dt class="stack-block-label">Sub-label 1</dt>
            <dd class="stack-block-content">Sub-content 1</dd></dt>

Может кто-нибудь, пожалуйста, помогите вытащить меня оттуда. Вот мой стек-блиц: https://stackblitz.com/edit/clarity-datagrid-basic-eruq88

В средстве разработки Chrome, если я отключаю свойство -webkit-mask-image из стекового представления, это работает хорошо. Но в моем коде, когда я перезаписываю класс просмотра стека, это не работает. enter image description here

1 Ответ

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

Вы должны переместить ваш <clr-modal></clr-modal> div так, чтобы он находился под <div class="main-container"></div> div. Это выведет его из внутренних элементов и наложит модальное поверх всего. Установка z-index для дочерних элементов не будет работать.

...