CODEWITHSUNDEEP
angularangular-material-7
svijay.aug12
svijay.aug12

Reputation: 561

Customize angular material mat-menu-item to show items smaller in size (both width and height)

I am working on an angular application using angular material components. In a grid, I have inline actions that should be supported (which can edit, delete and many more actions).

Currently when I embed the mat-menu component in the grid, the items list show very large size menu-items. I want to customize the size of the menu item (both in terms of its width and height).

Is there anyway to do this.

Current behavior:

enter image description here

Expectation:

enter image description here

Also, I am looking for the drop down menu as shown in the screenshot below (Menu drop item highlighted in green border. We can notice that the dropdown menu comes clean exactly below the icon and forms a clear box to show the menu items.)

enter image description here

However, in the default menu, there is no clear highlight or borders against the dropdown menu selected.

For example, as I have implemented below, the dropdown menu below the profile picture is rendered as below. Comparing this to the previous screenshot, the previous one look much more cleaner.

enter image description here

Code#

<button mat-icon-button [matMenuTriggerFor]="profileMenu" *ngIf="userIsAuthenticated">
    <!-- <i class="fa fa-user white-icon" aria-hidden="true"></i> -->
    <img class="avatar" src="../../assets/1.jpg">
  </button>

  <mat-menu #profileMenu="matMenu">
    <button mat-menu-item routerLink="/profile"> <i class="fa fa-user" aria-hidden="true"></i> Profile </button>
    <button mat-menu-item (click)="onLogout()"> <i class="fa fa-sign-out" aria-hidden="true"></i> Logout </button>
  </mat-menu>

Changes after adding CSS classes

::ng-deep .mat-menu-content {
  width: 200px !important; 
  height: 120px !important; 
}

enter image description here

Upvotes: 4

Views: 20006

Answers (2)

Marshal
Marshal

Reputation: 11081

The following CSS will accomplish what you need.

::ng-deep .mat-menu-content {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.mat-menu-item{
  line-height:35px;
  height:35px;
}

Stackblitz

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

Upvotes: 8

dileepkumar jami
dileepkumar jami

Reputation: 2265

Try adding the following in your css file

::ng-deep .mat-menu-content {
  width: 250px !important; // as you wish
  height: 200px !important; // as you wish 
}

Upvotes: 0

Related Questions