Question

<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 override default max-width in Angular 2

Answer 1

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

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

希望有帮助

Answer 2

要设置单个菜单的样式，请向<mat-menu>添加一个附加类并更改宽度。这适用于Angular 9：

<button mat-stroked-button [matMenuTriggerFor]="myMenu">Open Menu</button>
<mat-menu #myMenu="matMenu" class="my-menu">
  <button mat-menu-item>Approve</button>
  <button mat-menu-item>Reject</button>
</mat-menu>

::ng-deep .my-menu {
    width: 190px;
}

Answer 3

注意：我使用了Angular7。我知道这与Angular 2有关，但我希望有人会对此有所帮助。

我还需要将菜单设置为固定宽度，但是后来我意识到菜单从内容中获取宽度。

因此，您可以做的是创建一个不属于角形材料的元素，并为其指定宽度。例如...

<div class="ProfileBar">
  <mat-icon [matMenuTriggerFor]="profileMenu"class="ProfileImage">account_circle</mat-icon>

  <mat-menu #profileMenu="matMenu">
    <div class="ProfileInfo">
      <mat-icon class="ProfileInfo-user-icon">account_circle</mat-icon>
      <p class="full-name">Some full name</p>
       <p class="nickname">@SomeNickname</p>
    </div>

    <button (click)="logout()" mat-menu-item>Logout <mat-icon>exit_to_app</maticon></button>
  </mat-menu>
</div>

所以我们这里有一个ProfileInfo类，您可以像这样通常在其上放置宽度 .ProfileInfo { width: 300px }之类。这将使菜单具有其宽度，mat-menu-items将遵循该宽度。您甚至不必使其功能正常，它就像

  <mat-menu #profileMenu="matMenu">
    <div class="ClassOnlyForTheWidth"></div>
  </mat-menu>

就是这样。

另一方面，我不知道这对您是否有帮助，您可以通过放置[class]="'MyClass'"来完全删除材料样式。这将一起删除所有材质样式，例如，根据您使用的浏览器，原生呈现一个按钮元素，而无需任何样式。如果然后执行[class]="'MyClass mat-menu-item'"，它将返回菜单项（或任何角度分量）的样式，但是您又回到了整个stackoverflow线程的问题。

享受，希望对您有所帮助

Answer 4

https://material.angular.io/components/menu/api

@Input（'class'）panelClass：字符串

此方法采用在主机mat-menu元素上设置的类并应用   它们显示在覆盖容器中显示的菜单模板上。   否则，很难从外部设置包含菜单的样式   组件。

<mat-menu class="my-class" ... >

css：

.mat-menu-panel.my-class { width: 400px; }

Answer 5

在 Angular 12 的 CSS 页面上，以下内容对我有用，因为它使宽度根据动态内容灵活适应。它还使菜单保持良好对齐。

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

Answer 6

 <div fxHide fxHide.xs="false" fxHide.md="true">
            <button mat-icon-button [matMenuTriggerFor]="menu">
                <mat-icon>more_vert</mat-icon>
            </button>
            <mat-menu #menu="matMenu">
                <button mat-menu-item *ngFor="let menu of repoService.toolbarMenu" class="mr-40" (click)="repoService.onToolbarClick(menu)">
                    <mat-icon *ngIf="menu.icon" aria-label="menu.key" class="mr-4">{{menu.icon}}</mat-icon>
                    <span class="ml-8">{{menu.displayKey | translate}}</span>
                </button>
            </mat-menu>
        </div>

我们只需要做些小改动（class =“ mr-40”）先生代表右边距权利，先生采用2的倍数，因此我们可以根据需要增加宽度。

Answer 7

在这种情况下，我将自定义宽度设置为 mat-menu-item。并且它对我来说非常合适。

<mat-menu #menu1="matMenu" class="my-menutttt">
  <button style="width: 128px"  mat-menu-item>Deal</button>
  <button  mat-menu-item>Note</button>
  <button  mat-menu-item>Call or Chat</button>
  <button  mat-menu-item>Appointment</button>
  <button  mat-menu-item> Task</button>
</mat-menu>

Answer 8

只需包装mat-menu的内容，并将宽度应用于包装器本身，如以下示例所示：

  <button mat-button [matMenuTriggerFor]="menu">
    Hello, John Doe!
  </button>
  <mat-menu #menu>
    <div class="mat-menu-autosize" style="width: 300px">
      <button mat-menu-item>Settings</button>
      <button mat-menu-item>Help</button>
      <mat-divider></mat-divider>
      <button mat-menu-item>Logout</button>
    </div>
  </mat-menu>

Answer 9

这对我有用

在查看页面 (HTML)

<mat-menu #menu="matMenu" class="menu"> 
  <div class="notification-container">
    <button mat-menu-item>Item 1</button>
    <button mat-menu-item>Item 2</button>
  </div>
</mat-menu>

在样式（scss，css）页面上

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

Answer 10

对于 Angular 11，以下有效

在组件中

<mat-menu #profileDropdown="matMenu" xPosition="before" class="profile-dropdown">
...
</mat-menu>

在styles.scss中

.profile-dropdown { 
  width: 380px; 
  max-width: unset !important;
}

这与 Stefan Norberg 的回答很接近，但他的样本对我来说并不适用。我必须添加 max-width: unset !important; 并将其放在顶部样式文件中，否则没有效果。

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

10 个答案: