[Table] Checkbox moves place when clicked

[tawalters61]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

When selecting a checkbox within a table, the highlighted selection highlighting should not move up.

What is the current behavior?

The alignment of the highlighting is not aligned with the checkbox itself.

What are the steps to reproduce?

Providing a StackBlitz/Plunker (or similar) is the best way to get the team to see your issue.

Plunker starter (using on @master): https://goo.gl/uDmqyY

StackBlitz starter (using latest npm release): https://goo.gl/wwnhMV

This existing table example at the following URL does not work properly with material 5.0.0*

https://stackblitz.com/edit/angular-material2-table

What is the use-case or motivation for changing an existing behavior?

It's a bug

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Material: 5.0.0-rc0, 5.0.0-rc.1
The bug does not exist in 2.0.0-beta.12

Is there anything else we should know?

No

[jelbourn]

@tawalters61 I don't follow what the issue is you're reporting.

[tawalters61]

When selecting a checkbox within a table cell, the checkbox moves up several pixels, causing it not to be aligned properly. Also, the 'special effects' are clipped. In the link above, it works correctly, because the example online is using a pre-5.0.0 version of Material . But, if the same example is run with Material 5.0.0-rc0 or 5.0.0-rc.1, the problem occurs.

[c0dewhisper]

@jelbourn The checkbox is only moved when you directly click on it. If the ripple effect is not applied, then everything is fine

[tawalters61]

Yes, this is what I am seeing. This problem does not exist in the pre-5 versions.

[wandri]

Same as this issue: #8517 .
One Workaround to wait the fix is:

  mat-cell {
    overflow: visible;
  }

[tawalters61]

Thanks! This worked!

[volei]

Actually, I remember having this effect since way before Material 5.0.0-rc0 on Windows7/Chrome/Firefox/Typescript 2.4.x.

[merschel]

Could be related to #8517 and #8588.

[andrewseguin]

The issue indeed is due to overflow. For some reason the checkbox doesn't like how the cell's overflow is set and it moves when clicked. Need to investigate why the checkbox starts correctly but then moves on click

[pacurtin]

// Bug fix for mat-checkbox inside a mat-cell
mat-cell, .mat-header-cell{
   overflow: visible;
 }

If you want to put a checkbox in the header (i.e "Select All" checkbox) add .mat-header-cell to the CSS as well.