材料分页下拉不合适

Posted 2023-03-05

【中文标题】材料分页下拉不合适

【英文标题】：Material pagination dropdown out of place

【发布时间】：2019-08-10 00:23:03

【问题描述】：

问题

我目前正在实现一个<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>

【参考方案1】：

似乎需要一些css。只需尝试在您的style.css 或style.scss 行中加入

@import "../node_modules/@angular/material/prebuilt-themes/indigo-pink.css";

【参考方案2】：

我终于可以解决这个问题了=D我们知道Angular的一些css代码覆盖了与cdk-overlay-container一起工作的分页的原始css代码。这就是为什么我试图将代码从我自己的 css-File 中的文件 @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%;
  

现在你有了 Angular 的原始分页，如果你想要一个非透明的 Dropbox 选择，将以下行添加到 .cdk-overlay-pane

background-color: white;
border: 1px solid rgba(128, 128, 128);

【参考方案3】：

import  MatPaginatorModule  from '@angular/material/paginator';

您是否导入了材料分页模块？如果没有，请导入并重试。谢谢

【讨论】：

我已经导入了，没什么区别。

你能分享一下这个小提琴吗，因为它对我来说很好用

【参考方案4】：

在大多数项目中，无论是 boostrap 主题还是材料主题，通常都有一个主题文件夹，对于 Bootstrap 项目，您将拥有 theme-variable.scss 和 theme.scss 之类的文件，而在材料项目中，您会找到 @ 987654323@或material-theme.scss。

最后两个文件对于正确渲染角度材质组件非常重要，即使在导入负责该组件的模块之后，您也需要上述文件。

确保您拥有这两个文件后，您希望将它们导入您的 styles.css 文件中，并使用以下行：@import './theme/material-theme.css';

完成上述步骤后，表格或任何角度材质组件都会正确渲染。