材料分页脱落
材料分页脱落
提问于 2019-03-19 04:56:50
问题
我目前正在实现一个<mat-table>，它附带了一个<mat-paginator>。唯一的问题是，每页的下拉列表正在向左偏移。看上去像是在Bootstrap container之外。
下面是正在发生的事情的图像。您可以看到下拉列表的位置和项目的位置是完全错误的。
代码
我的整个站点都在引导容器中，所以我的app.component.html基本上如下所示：
<app-header></app-header>
<div class="container mt-3">
<router-outlet></router-outlet>
</div>
<app-footer></app-footer>问题中的页面只是一个简单的资料表，并将分页添加到底部。
<div class="row">
<div class="col-md-12">
<mat-table *ngIf="items" [dataSource]="items" matSort>
<!-- ID Column -->
<ng-container matColumnDef="type">
<mat-header-cell *matHeaderCellDef mat-sort-header> Type </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.type}} </mat-cell>
</ng-container>
<!-- Provider Column -->
<ng-container matColumnDef="provider">
<mat-header-cell *matHeaderCellDef mat-sort-header> Provider </mat-header-cell>
<mat-cell *matCellDef="let row"> <a href="https://eosauthority.com/account/{{row.provider}}" target="_blank">{{row.provider}}</a> </mat-cell>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="url">
<mat-header-cell *matHeaderCellDef mat-sort-header> URL </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.url}} </mat-cell>
</ng-container>
<!-- Color Column -->
<ng-container matColumnDef="country">
<mat-header-cell *matHeaderCellDef mat-sort-header> Country </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.country}} - <span class="flag-icon flag-icon-{{row.country | lowercase}}"></span> </mat-cell>
</ng-container>
<!-- Color Column -->
<ng-container matColumnDef="updated_on">
<mat-header-cell *matHeaderCellDef mat-sort-header> Updated </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.updated_on}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="['type', 'provider', 'url', 'country', 'updated_on']"></mat-header-row>
<mat-row *matRowDef="let row; columns: ['type', 'provider', 'url', 'country', 'updated_on']">
</mat-row>
</mat-table>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>
</div>回答 4
Stack Overflow用户
发布于 2019-10-05 17:29:57
似乎需要一些css。只需尝试在您的style.css或style.scss中包含行
@import "../node_modules/@angular/material/prebuilt-themes/indigo-pink.css";Stack Overflow用户
发布于 2020-03-23 06:37:17
我终于可以解决这个问题了，我们已经知道，一些角方向的css代码覆盖了与cdk-overlay-container.一起工作的分页的原始css代码这就是为什么我试图在我自己的css中从@angular/cdk/overlay-prebuilt.css文件中复制代码的原因--文件修复了这个错误。之后，我查看了我真正需要的组件，仅此而已：
//Add this to your css/scss File
::ng-deep {
.cdk-overlay-container,
.cdk-global-overlay-wrapper {
pointer-events: none;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.cdk-overlay-container {
position: fixed;
z-index: 1000;
}
.cdk-overlay-pane {
position: absolute;
pointer-events: auto;
box-sizing: border-box;
z-index: 1000;
display: flex;
max-width: 100%;
max-height: 100%;
}
}现在您有了原始的角分页，如果您想要一个不透明的dropbox选择，那么将下面的行添加到.cdk-overlay-pane
background-color: white;
border: 1px solid rgba(128, 128, 128);Stack Overflow用户
发布于 2019-03-19 05:12:46
import { MatPaginatorModule } from '@angular/material/paginator';你们有进口材料分页模块吗？如果没有，请导入并重试。谢谢
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55241603
复制
![洛谷 *P1435 [IOI2000]回文字串 / [蓝桥杯2016省]密码脱落（动态规划）](https://ask.qcloudimg.com/http-save/yehe-8082555/7f48e73695a1e133598ab8a495250d97.jpeg)
相似问题
材料UI分页
“线轴脱落；/”后线轴脱落的意义
角度材料表分页
角材料分页指令
反应材料UI分页
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
