我正在尝试使材质菜单中的滚动条消失,但我似乎无法做到这一点.
现在是这样:
如我所愿:
我知道必须在CSS中设置的选项溢出:隐藏;但是当我将其放在组件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中进行更改,则溢出:自动溢出:隐藏,它可以正确呈现,但是如果在.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"
},
告诉我您是否需要更多信息.
最佳答案
原文链接:https://www.f2er.com/html/530393.html