Отключить полосу прокрутки в меню коврика

Question

Я пытаюсь сделать так, чтобы полоса прокрутки в меню материала исчезла, но, похоже, я не могу этого сделать.

Как сейчас:

Как я хочу, чтобы это было:

Я попробовал предложенные решения здесь и здесь , но безуспешно.

Я знаю, что опция, которую я должен установить в css - это overflow: hidden;, но, похоже, это не помогает, когда я помещаю его в компонент css.

Я пытался установить эту опцию на .mat-menu-panel, .mat-menu и даже с пользовательским классом, но она не работает.

Мой HTML выглядит так:

<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>

Меню находится в одной из ячеек таблицы.

Из инструментов разработчика в браузере, если я изменяю в .mat-menu-panel overflow: auto на overflow:hidden, он отображается правильно, но если я изменяю его в .css, он не работает.

Зависимости, в случае, если это помогает:

"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"
  },

Скажите, если вам нужна дополнительная информация.

Answer 1

Потому что, когда вы используете угловой, один общий атрибут будет отображаться в DOM как ng-content, который перезаписывает свойства вашего класса, написанные на css, поэтому попробуйте этот код, чтобы исключить использование собственных угловых стилей для использования в приложении.

Перейти к компоненту,

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

тогда

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

тогда ваши стили будут приняты браузером.