在垫菜单中禁用滚动条 [英] Disable scrolling bar in mat menu

问题描述

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

现在就这样:

如我所愿:

我已尝试在此处和此处，没有成功.

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

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

解决方案

因为，当您使用角度时，一个通用属性将在DOM中呈现，例如 ng-content会覆盖您用CSS编写的类属性，因此请尝试使用此代码，以消除将在应用程序中使用的本机角度样式.

转到组件

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

然后

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

然后您的样式将由浏览器获取.

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.

解决方案

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 .

这篇关于在垫菜单中禁用滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！