How to show full text and wrap in menu item in angular material

user_9247989 0
Viewed 8896

I am trying to make a notification system, So I am using the mat-menu from angular material. I've increased the width of menu-item but the problem is that it is not showing the full content. It is only showing the text which comes in one line.

enter image description here

but I want to wrap the text on a new line if it exceeds that line like here

enter image description here

my compontent.html 

  <button mat-button [matMenuTriggerFor]="notification"><mat-icon>add_alert</mat-icon></button>
  <mat-menu #notification="matMenu" [overlapTrigger]="false" class="my-full-width-menu">
    <button mat-menu-item style="white-space: normal">
      Learn one way to build applications with Angular and reuse your code and abilities to build
      apps for any deployment target. For web, mobile web, native mobile and native desktop.
    </button>
    <button mat-menu-item>Item 2</button>
  </mat-menu>

and CSS is

.mat-menu-panel.my-full-width-menu {
  max-width: none;
  width: 100vw;
  margin-left: -8px;
  margin-top: 24px;
}

Please tell me how to do that.

angular-material angular css html javascript
1 Answers

The mat-menu-item class has static line-height and static height to 48px that is preventing it from word wrapping.

::ng-deep button.mat-menu-item {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    outline: 0;
    border: none;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    /** set line height to desired height */
    line-height: 18px;
    /** set height to auto */
    height: auto;
    padding: 0 16px;
    text-align: left;
    text-decoration: none;
    max-width: 100%;
    position: relative;
}

To set menu width, use the following.

::ng-deep div.mat-menu-panel {
    min-width: 112px;
      /** set width to 500px */
    max-width: 500px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100vh - 48px);
    border-radius: 4px;
    outline: 0;
}

Stackblitz

https://stackblitz.com/edit/angular-qzbutg?embed=1&file=app/menu-overview-example.css

user_65811730
Related