禁用 mat 菜单中的滚动条 [英] Disable scrolling bar in mat menu
问题描述
我试图让材质菜单中的滚动条消失,但我似乎无法做到.
I am trying to make the scroll bar in a material menu disappear but I don't seem to be able to do it.
现在的情况:
如我所愿:
I've tried the solutions proposed here and here, without success.
我知道我必须在 css 中设置的选项是 overflow: hidden;
但是当我把它放在组件 css 中时这似乎不起作用.
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.
我已经尝试将该选项设置为 .mat-menu-panel
、.mat-menu
,甚至使用自定义类,但它不起作用.
I've tried setting that option to .mat-menu-panel
, .mat-menu
and even with a custom class, but it does not work.
我的 html 看起来像这样:
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.
从浏览器中的开发者工具中,如果我将 .mat-menu-panel
overflow: auto
更改为 overflow:hidden
它呈现正确,但如果我在 .css 中更改它,它将不起作用.
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.
推荐答案
因为,当您使用 angular 时,一个公共属性将在 DOM 中呈现,例如ng-content 将覆盖用 css 编写的类属性,因此请尝试使用此代码,这将消除在应用程序中使用的原生角度样式.
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 .
转到组件,
import {ViewEncapsulation} from '@angular/core';
然后
@Component({
.....
.....
encapsulation: ViewEncapsulation.None
})
那么您的样式将被浏览器采用.
then your styles will taken by browser .
这篇关于禁用 mat 菜单中的滚动条的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!