时间戳

首页 > 解决方案 > 如何增加垫子菜单项的宽度？

angular - 如何增加垫子菜单项的宽度？

问题描述

<div fxHide fxHide.xs="false" fxHide.md="true">
  <button mat-icon-button [matMenuTriggerFor]="menu" class="my-menu">
    <mat-icon>more_vert</mat-icon>
  </button>
  <mat-menu #menu="matMenu">
    <button mat-menu-item *ngFor="let menu of repoService.toolbarMenu" class="mr-4" (click)="repoService.onToolbarClick(menu)"
    class="notifications-dropdown">

      <mat-icon *ngIf="menu.icon" aria-label="menu.key" class="mr-4">{{menu.icon}}</mat-icon>
      <span class="notification-row">{{menu.displayKey | translate}}</span>

    </button>
  </mat-menu>

CSS文件

.mat-menu-panel.notifications-dropdown {
      max-width:none;
      width: 100vw; 
      margin-left: -8px;
      margin-top: 24px;
      overflow: visible;
  }
  
  .notification-row{
      width: 424px;
  }

我已经尝试过了，但它对我不起作用！

md-menu 覆盖 Angular 2 中的默认最大宽度

标签： angularangular-material

解决方案

我有同样的问题，并通过覆盖 mat-menu-panel 最大宽度属性来解决它：

::ng-deep.mat-menu-panel {
  max-width: none !important;
}

希望能帮助到你

推荐阅读