How to fix mat-paginator size

user_12034088 0
Viewed 7418

In mat-table for pagination, there is no flexibility for sticky-table. In pagination after move there is no css is apply (as shown in images). I tried to give a background color but it is not working. refer this code : https://stackblitz.com/angular/bbmgqanjelq?file=app%2Ftable-sticky-columns-example.css

enter image description here

![enter image description here

.mat-paginator{
    background-color: brown;
    color: gold;
    font-size: 1rem;
}

.mat-header-cell{
    font-size: 1rem;
    background-color: brown;
    color: gold;
  }
.example-container {
  height: 460px;
  width: 550px;
  overflow: auto;
}
table {
  width: 800px;
}

<div class="example-container mat-elevation-z8">
  <table mat-table [dataSource]="dataSource">

    <!-- Name Column -->
    <ng-container matColumnDef="name" sticky>
      <th mat-header-cell *matHeaderCellDef> Name </th>
      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>

    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <th mat-header-cell *matHeaderCellDef> No. </th>
      <td mat-cell *matCellDef="let element"> {{element.position}} </td>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="weight">
      <th mat-header-cell *matHeaderCellDef> Weight </th>
      <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
    </ng-container>

<!-- Star Column -->
    <ng-container matColumnDef="star" stickyEnd>
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let element">
        <mat-icon>more_vert</mat-icon>
      </td>
    </ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
 </table>

<mat-paginator [length]="50" [pageSizeOptions]="[10, 20, 30]" showFirstLastButtons>
</mat-paginator>
</div>

if we move the table paginator should look same as before.

angular css
4 Answers

I was facing the same issue, but got fixed.

Place the mat-paginator outside the container div of , then this pagination width issue won't even arise at first. The scroll will apply only on table data itself, not on pagination.

user_61175730

Okay I'm adding another answer because this one is totally different from the previous one.

You can use the Angular renderer along with view children to incread the size of the paginator to the size of the table.

Here is the stackblitz demo : https://stackblitz.com/edit/angular-mxdsdk-d2b7xa?file=app/table-sticky-columns-example.ts

As you can see, the paginator gets the total size of the table and is displayed on the right. Not sure you want it, but it gives you a new way of using it. 

 <table mat-table [dataSource]="dataSource" #table>
 ...
 <mat-paginator sticky #paginator></mat-paginator>

@ViewChild('table', { static: true, read: ElementRef }) table: ElementRef<HTMLDivElement>;
@ViewChild('paginator', { static: true, read: ElementRef }) paginator: ElementRef<HTMLDivElement>;

constructor(
  private renderer: Renderer2
) {}

ngOnInit() {
  const width = this.table.nativeElement.getBoundingClientRect().width;
  this.renderer.setStyle(this.paginator.nativeElement, 'width', width + 'px');
}

enter image description here

Admin1

Maybe you need to use ::ng-deep property in your scss or css like this:

::ng-deep .mat-paginator{
    background-color: brown;
    color: gold;
    font-size: 1rem;
}

::ng-deep .mat-header-cell{
    font-size: 1rem;
    background-color: brown;
    color: gold;
}

For more information about ng-deep, check this link.

user_51481970
Admin1
Related