Mat-Paginator out of position after Chrome update

Question

Good afternoon, everyone,

I use Angular 6.1.5 with Angular-Material 6.4.7, and about 2 months after a Google Chrome update mat-Paginator moved to position 9 "nine" in the table, staying in the middle of the list of information, and when accessing this same table in Firefox browser, the mat-Paginator stands at the end of the table, in its normal position.

Has anyone experienced a similar situation? Is there any correction?

I appreciate the help, and I apologize if I’m not being clear in my explanation.

Table image in Firefox browser, mat-position in the correct position:

Table image in Chrome browser, with the mat-position in the middle of the table, naposition nine of the list:

I will pass an excerpt of the code I am using to get an idea of extrusion:

<div class="flex-p container-fixed response-container">
   <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">      
      <ng-container matColumnDef="turma">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> TURMA </th>
         <td mat-cell *matCellDef="let element">
            <span class="mobile-label">Turma:</span>
            <div appTruncate matTooltip="{{element.descricaoturma}}"> {{element.descricaoturma}} </div>
         </td>
      </ng-container>
      
      <ng-container matColumnDef="professor">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> PROFESSOR </th>
         <td mat-cell *matCellDef="let element"> 
            <span class="mobile-label" matTooltip="Professor">Prof.:</span>
            <div appTruncate matTooltip="{{element.nomeprofessor}}"> {{element.nomeprofessor}} </div>
         </td>
      </ng-container>
      
      <ng-container matColumnDef="materia">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> MATÉRIA </th>
         <td mat-cell *matCellDef="let element"> 
            <span class="mobile-label">Matéria:</span>
            <div appTruncate matTooltip="{{element.descricaomateria}}"> {{element.descricaomateria}} </div>
         </td>
      </ng-container>
      
      <ng-container matColumnDef="titulo">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> TÍTULO </th>
         <td mat-cell *matCellDef="let element"> 
            <span class="mobile-label">Título:</span>
            <div appTruncate matTooltip="{{element.titulo}}"> {{element.titulo}} </div>
         </td>
      </ng-container>
      
      <ng-container matColumnDef="abertura">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> ABERTURA </th>
         <td mat-cell *matCellDef="let element"> 
            <span class="mobile-label">Abertura:</span>
            <div appTruncate matTooltip="{{element.data | date:'dd/MM/yyyy'}}"> {{element.data | date:"dd/MM/yyyy"}} </div>
         </td>
      </ng-container>
      
      <ng-container matColumnDef="entrega">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> ENTREGA </th>
         <td mat-cell *matCellDef="let element"> 
            <span class="mobile-label">Entrega:</span>
            <div appTruncate matTooltip="{{element.entrega | date:'dd/MM/yyyy'}}"> {{element.entrega | date:"dd/MM/yyyy"}} </div>
         </td>
      </ng-container>

      <ng-container matColumnDef="status">
         <th mat-header-cell *matHeaderCellDef class="status-conf text-center"> STATUS </th>
         <td mat-cell *matCellDef="let element" class="text-center status-conf">
            <mat-slide-toggle 
                           color="primary" 
                           matTooltip= "Clique para INATIVAR a Atividade a turma."
                           [checked]="element.status" 
                           (click)="onInactivate(element.atividade_id)">
            </mat-slide-toggle>
         </td>
      </ng-container>
         
      <ng-container matColumnDef="acao">
         <th mat-header-cell *matHeaderCellDef class="text-right"> AÇÃO </th>
         <td class="body-action text-right" mat-cell *matCellDef="let element">
            <button mat-icon-button (click)="onEdit(element.atividade_id)" color="primary">
               <mat-icon class="md18" matTooltip="Editar a Atividade.">edit</mat-icon> 
            </button>
         </td>
      </ng-container>
      
      <ng-container matColumnDef="select">
         <th mat-header-cell *matHeaderCellDef>
            <mat-checkbox class="check-top"
                           color="primary"
                           (change)="$event ? masterToggle() : null"
                           [checked]="selection.hasValue() && isAllSelected()"
                           [indeterminate]="selection.hasValue() && !isAllSelected()">
            </mat-checkbox>
         </th>
         <td mat-cell *matCellDef="let row">
            <mat-checkbox color="primary"
                           (click)="$event.stopPropagation()"
                           (change)="$event ? selection.toggle(row) : null"
                           [checked]="selection.isSelected(row)">
            </mat-checkbox>
         </td>
      </ng-container>
      
      <tr mat-header-row *matHeaderRowDef="displayedColumns" class="header-top"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="table-hover-row"></tr>
   </table>
   <mat-paginator #paginator class="paginator-centered" [pageSize]="10" [pageSizeOptions]="[5, 10, 25]" [showFirstLastButtons]="true"></mat-paginator>
</div>

Answer 1

I was able to identify what was generating the displacement of my MAT-PAGINATOR, there was in my CSS a line of code that was limiting my MAT-TABLE and the MAT-PAGINATOR was using it with the end point of the TABLE and was positioned at that point, removed the line of CSS code, MAT-PAGINATOR returned to its normal behavior. Thanks to all who helped with your comments.

Code line removed from CSS.

.mat-table { overflow: auto; max-height: 500px; }