I have a clarity modal, which is there under stack-block-content. When I open this modal it overlaps all other UI elements.
I tried setting z-index to very large number but still it did not work.
<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>
Can anyone please help get me out of there. Here is my stackblitz: https://stackblitz.com/edit/clarity-datagrid-basic-eruq88
In chrome developer tool, if I disable -webkit-mask-image property from stack-view it works well. But in my code, when I overwrite stack-view class it doesn't work.
You need to move your
<clr-modal></clr-modal>
div out so that it is under the<div class="main-container"></div>
div. This will bring it out of the inner divs and overlay the modal on top of everything. Settingz-index
on child elements will not work.