Issue
I am currently facing a challenge while incorporating a <mat-table> with a <mat-paginator> in my project. The issue lies in the positioning of the items per page dropdown, which appears to be offset to the left and seemingly outside the Bootstrap container.
An image depicting this problem can be viewed here.
Code
The structure of my site is enclosed within a Bootstrap container as illustrated by my app.component.html:
<app-header></app-header>
<div class="container mt-3">
<router-outlet></router-outlet>
</div>
<app-footer></app-footer>
The specific page causing the issue includes a basic material table with pagination at 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>
<!-- Country 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>
<!-- Updated 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>