Angular: Too many mat-menu items that goes over the page

Issue

I have a mat-menu and div inside for the mat-menu item. Sometimes there is less items sometimes there is more depends on the data fetched.

However I found out that when it’s more, it will not have a vertical scrollbar like I imagined it would, instead of it just went out of the mat-menu and flow over the page.

I try to fix max-height for mat-menu-item with overflow: auto but it is not working.

It current looks like this:

enter image description here

Here’s my current html and css

        <mat-menu #emailOptionsMenu="matMenu" xPosition="before">
            <div class="dropdown_item" *ngFor="let user of filteredUsers">
                {{user}}
            </div>
        </mat-menu>
.dropdown_item {
    padding: 6px 20px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
}

How can I fix this?

Solution

Add this to css

::ng-deep .mat-menu-content{
  max-height: 300px; 
  overflow: scroll;
}

Answered By – Wynn Teo

Answer Checked By – Timothy Miller (AngularFixing Admin)

Leave a Reply

Your email address will not be published.