如何在 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 导致弹出框隐藏，因此在 mat-grid-tile 上设置 overflow: unset 应该可以解决您的问题，因此向容器网格图块添加一些类

<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;
  }

demo