CODEWITHSUNDEEP
cssangularangular-material
Sivvie Lim
Sivvie Lim

Reputation: 1286

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

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?

Upvotes: 1

Views: 2949

Answers (1)

Wynn Teo
Wynn Teo

Reputation: 190

Add this to css

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

Upvotes: 2

Related Questions