Disable scrolling bar in mat menu

Question

I am trying to make the scroll bar in a material menu disappear but I don't seem to be able to do it.

As it is right now:

As I want it to be:

I've tried the solutions proposed here and here, without success.

I know that the option I must set in the css is overflow: hidden; but this does not seem to do the trick when I put it in the component css.

I've tried setting that option to .mat-menu-panel, .mat-menu and even with a custom class, but it does not work.

My html looks like this:

<mat-table [dataSource]="dataSource">

      <ng-container matColumnDef="employee_name">
        <th mat-header-cell *matHeaderCellDef class="rest"> Nombre </th>
        <td mat-cell *matCellDef="let element"> {{element.employee_name}}</td>
      </ng-container>

      <ng-container matColumnDef="date">
        <th mat-header-cell *matHeaderCellDef class="rest"> Fecha </th>
        <td mat-cell *matCellDef="let element"> {{element.date | date:'yyyy-MM-dd'}}</td>
      </ng-container>

      <ng-container matColumnDef="duration">
        <th mat-header-cell *matHeaderCellDef class="rest"> Duración </th>
        <td mat-cell *matCellDef="let element"> {{element.duration}}</td>
      </ng-container>

      <ng-container matColumnDef="actions">
        <th mat-header-cell *matHeaderCellDef class="menu"></th>
        <td mat-cell *matCellDef="let element" (click)="$event.stopPropagation()">
          <button mat-icon-button [matMenuTriggerFor]="menu">
            <mat-icon>more_vert</mat-icon>
          </button>
          <mat-menu #menu="matMenu" class="menu-without-scroll">
            <button mat-menu-item (click)="editDuration(element)">
              <mat-icon>edit</mat-icon>
              <span>Editar</span>
            </button>
            <button mat-menu-item (click)="deleteDuration(element)">
              <mat-icon>delete</mat-icon>
              <span>Eliminar</span>
            </button>
          </mat-menu>
        </td>

      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedComumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedComumns;" (click)="onEdit(row)"></tr>
    </mat-table>

The menu is in one of the cells of the table.

From the developer tools in the browser if I change in .mat-menu-panel overflow: auto to overflow:hidden it renders correctly but if I change it in the .css it does not work.

The dependencies, in case it helps, are:

"dependencies": {
    "@angular/animations": "~7.0.0",
    "@angular/cdk": "^7.2.1",
    "@angular/common": "~7.0.0",
    "@angular/compiler": "~7.0.0",
    "@angular/core": "~7.0.0",
    "@angular/forms": "~7.0.0",
    "@angular/http": "~7.0.0",
    "@angular/material": "^7.2.1",
    "@angular/platform-browser": "~7.0.0",
    "@angular/platform-browser-dynamic": "~7.0.0",
    "@angular/router": "~7.0.0",
    "angular-material": "^1.1.12",
    "core-js": "^2.5.4",
    "hammerjs": "^2.0.8",
    "rxjs": "~6.3.3",
    "zone.js": "~0.8.26"
  },

Tell me if you need more information.

Answer 1

Because , when you using angular one common attribute will be rendered in DOM like ng-content which will over write your class properties written in css , so try this code this will eliminate native angular styles to use in application .

Go to the Component,

import {ViewEncapsulation} from '@angular/core';

then

@Component({
.....
.....
encapsulation: ViewEncapsulation.None
})

then your styles will taken by browser .

Answer 2

I know this question is a couple years old, but the last answer can cause serious issues with css classes from your own style bleeding into child elements. Sure, you can now overwrite css styles from sub-components easily, but it also means you can easily overwrite them unintentionally. ViewEncapsulation.None should not be used unless absolutely necessary.

Instead, it's better to use ::ng-deep (see the reference) to specify when you would like to override a sub-component's styling.

In your case, you'd be able to do the following:

::ng-deep .menu-without-scroll {
    overflow: hidden !important;
}

Note that while ::ng-deep is deprecated, there is currently no alternative and hence it's reasonable to continue using it. See this answer for more info.