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.
but I want to wrap the text on a new line if it exceeds that line like 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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With