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

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

Я попытался установить 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>

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

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


angular css vmware-clarity clarity
person kaounKaoun    schedule 18.01.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

person SpellChucker    schedule 18.01.2019
comment
да, я знаю, что могу это сделать, но в моем коде это фактически компонент, и он должен быть там. - person kaounKaoun; 18.01.2019
comment
Единственное, что я могу придумать, это бросить *ngIf на stack-header вот так: <h4 class="stack-header" *ngIf="!basic">. Это уберет его из представления и будет выглядеть немного странно, но модальное окно покроет весь экран. - person SpellChucker; 18.01.2019
comment
@SpellChucker прав в том, что вы должны переместить модальное окно за пределы представления стека, тогда оно должно правильно наложиться. - person Jeremy Wilken; 18.01.2019