Angular 2 mat-checkbox inside mat-cell broken on check

Question

Someone can help me to fix this?

here is my code:

  <ng-container matColumnDef="checked">
    <mat-header-cell *matHeaderCellDef> </mat-header-cell>
    <mat-cell *matCellDef="let element" fxLayout="row" fxLayoutAlign="center center">
      <mat-checkbox [(ngModel)]="element.checked"></mat-checkbox>
    </mat-cell>
  </ng-container>

I was searching for a solution on Inspect and realize that when I uncheck the position, and check works normally again.

Thanks!

Answer 1

Just make the checkbox position fixed. This should do the trick.

<mat-checkbox [(ngModel)]="element.checked" class="fixed"></mat-checkbox>

.fixed {
    position: fixed;
}

Answer 2

It seems the problem comes from the default value of "overflow" property. Try to set it to unset

<ng-container matColumnDef="checked">
  <mat-header-cell *matHeaderCellDef> </mat-header-cell>
  <mat-cell *matCellDef="let element" style="overflow: unset;">
    <mat-checkbox [(ngModel)]="element.checked"></mat-checkbox>
  </mat-cell>
</ng-container>