材料分页下拉菜单不合适

Question

问题

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

Answer 1

看来有些css还是需要的。只需尝试将其包含在您的style.css或style.scss行中

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