Boa tarde pessoal,
Utilizo o Angular 6.1.5 com Angular-Material 6.4.7, e a mais ou menos 2 meses, após uma atualização do Google Chrome o mat-paginator se deslocou para a posição 9 "nove" na tabela, ficando no meio da lista de informações, sendo que quando acesso esta mesma tabela no navegador fireFox, o mat-paginator fica no final da tabela, em sua posição normal.
Alguém passou por situação parecida? Tem alguma correção?
Agradeço o auxilio, e peço desculpa se não estou sendo claro em minha explicação.
Imagem da tabela no navegador FireFox, mat-position na posição correta:
Imagem da tabela no navegador Chrome, com o mat-position no meio da tabela, naposição nove da lista:
Vou passar um trecho do código que estou utilizando para ter uma idéia da extrutura:
<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>