2

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 FireFox

Imagem da tabela no navegador Chrome, com o mat-position no meio da tabela, naposição nove da lista: imagem chrome

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>

1 Resposta 1

0

Consegui identificar o que estava gerando o deslocamento de meu MAT-PAGINATOR, havia em meu CSS uma linha de código que estava limitando meu MAT-TABLE e o MAT-PAGINATOR estava utilizando ele com o ponto fim da TABLE e se posicionava naquele ponto, removido a linha de código CSS, MAT-PAGINATOR retornou ao seu comportamento normal. Obrigdo a todos que ajudaram com seu comenários.

Linha de código removido do CSS.

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .