时间戳

首页 > 解决方案 > 禁用垫菜单中的滚动条

html - 禁用垫菜单中的滚动条

问题描述

我正在尝试使材质菜单中的滚动条消失，但我似乎无法做到。

就像现在一样：

照原样

正如我希望的那样：

如我所愿

我已经尝试过这里和这里提出的解决方案，但没有成功。

我知道我必须在 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"
  },

如果您需要更多信息，请告诉我。

标签： htmlcssangulartypescriptangular-material

解决方案

因为，当您使用 Angular 时，一个常见的属性将在 DOM 中呈现，例如 ng-content，它将覆盖您用 css 编写的类属性，所以试试这段代码，这将消除在应用程序中使用的原生 Angular 样式。

转到组件，

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

然后

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

那么您的样式将被浏览器采用。

推荐阅读