Angular Material Mat-Menu 在打开之前不会检查可用空间，并会切断答案

【问题标题】：Angular Material Mat-Menu won't check available space before opening, and cuts offAngular Material Mat-Menu 在打开之前不会检查可用空间，并会切断
【发布时间】：2021-03-19 16:12:22
【问题描述】：

我知道当 mat-menu 被触发时，它会检查是否有足够的空间来打开下面的菜单（如果为此设置为下面），如果没有，它将在上面打开，实际上在示例部分中的角度它有效的材料文档。但我的似乎不起作用：

以及为什么会发生这种情况的想法？这是代码：

.html:

  <button *ngIf="row.emsf.toString() !== '0' && (isBrowserOnline$ | async) && getOnlineStat()"
                [matMenuTriggerFor]="ptnmenu" mat-mini-fab class="ptn-menu-btn"
                [ngClass]="{'no-margin': showQC | async}"
                (click)="$event.stopImmediatePropagation(); $event.stopPropagation(); $event.preventDefault(); ">
                <mat-icon class="ptn-menu-icn">menu</mat-icon>
              </button>

              <mat-menu #ptnmenu="matMenu" xPosition="before" class="menuptn">
                <button mat-menu-item (click)="getAlsRep(0, row)">Print Report</button>
                <button mat-menu-item (click)="sendMailRep(row)">Send to Hospital</button>
                <button mat-menu-item (click)="sendMailCrew(row)">Message to crew</button>
                <button mat-menu-item (click)="alsAttachments(row)">Attachments</button>
                <button *ngIf="showQcButton" mat-menu-item (click)="openInciLookup(row)">Change Incident #</button>
                <button *ngIf="showQcButton && !row.fromCad" mat-menu-item (click)="openChangeCAD(row)">Change CAD
                  #</button>
                <button mat-menu-item (click)="openHistoryModal(row)">ePCR History</button>
                <button mat-menu-item (click)="duplicatePatient(row)">Duplicate Patient</button>
              </mat-menu>

它在一个垫表行内。

感谢您的帮助！

【问题讨论】：

标签： angular typescript angular-material angular-components

【解决方案1】：

有时只是提出问题可以帮助您找到答案。显然我在 style.css 中有一个样式导致了它。

.mat-menu-panel.menuptn {
  top: -30px !important;
  position: absolute !important;
  right: 30px !important;
}

我会把它留给后代。干杯！

【讨论】：