Material pagination dropdown out of place

Question

Issue

I am currently implementing a <mat-table> with a <mat-paginator> attached to it. The only problem is that the dropdown for items per page is being offset to the left. For what seems like outside of the Bootstrap container.

Here is an image of what is happening. You can see the location of the dropdown and the location of the items are completely wrong.

---

Code

My entire site is inside of a bootstrap container so my app.component.html basically looks like this:

<app-header></app-header>
<div class="container mt-3">
  <router-outlet></router-outlet>
</div>
<app-footer></app-footer>

The page in questions is just a simple material table with the pagination added to the bottom.

<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

It seems that some css are needed. Just try including in your style.css or style.scss the line

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