如何在 mat-grid 上制作彈出框

Question

我在 Angular 上使用材質網格進行了網格布局。在鏈接上添加了彈出框。但是當我單擊鏈接時，彈出框無法完全出現。我知道這是因為嚴格的網格 div。但我認為這可以通過更改 z 來解決-index。我做到了，但仍然存在同樣的問題。不知何故，它應該在所有網格 div 的前面。但我不知道我該怎么做？

下面我嘗試的演示包括我的網格和彈出框

https://stackblitz.com/edit/angular-nsqsbi-iwgfut?file=app/grid-list-overview-example.css

Answer 1

您的彈出框在mat-grid-tile中打開，其中應用了 css overflow:hidden導致彈出框隱藏所以設置overflow: unset在mat-grid-tile上未設置應該可以解決您的問題，因此將一些 class 添加到容器網格圖塊

<mat-grid-tile colspan="2" rowspan="1" class="o-unset">
        <li style="text-align: center" class="list-unstyled">
            <a href="javascript:;" role="button" [ngbPopover]="popStatus" popoverClass="my-custom-class">
        My Link
        </a>                                                              
     </li> 
    </mat-grid-tile>

然后在您的組件中 css

 .o-unset{
   overflow: unset;
  }

演示