Components: [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.

[nmarchenko]

@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: https://github.com/angular/material2/issues/8517 .
One Workaround to wait the fixe 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.

[tonysamperi]

Same in @angular/[email protected]

I had to be more specific to override defaults

mat-cell.mat-cell, mat-header-cell.mat-header-cell { overflow: visible; }

[DouglasWebster]

I have the same problem when using an unlabelled mat-checkboxinside mat-cell. The problem disappeared when I gave it a label. For the present I use <mat-checkbox>&nbsp;</mat-checkbox> as I find it quicker that altering the css. Of course, this only works if you can afford the extra space!

[tonysamperi]

@DouglasWebster Good to know! Actually I could have afforded to "steal" extra space...I'll give it a try with the next table ;)

[arundhaj]

@wandri @pacurtin @tonysamperi solution fixes the checkbox issue, however it mess up other columns alignment

[tonysamperi]

@arundhaj no it doesn't. Tomorrow I'll post a screen.
Probably you have a different environment...

[lostllama]

Any ETA for a non-hacky fix for this?

[tonysamperi]

@lostllama does it work for you the css rule in the styles.css ?

[mgs96]

@DouglasWebster workaround worked for me, @arundhaj is right, it messes the column alignment, I'm using version 5.0.0 of angular material.

[akvaliya]

I have checkbox at the bottom of page & in mobile devices when click on it moves scrolls & hides below. So we are unable to check/uncheck in mobile devices.

Any resolution for this?

[abha01singh]

I have checkbox at the bottom of page & in mobile devices when click on it moves scrolls & hides below. So we are unable to check/uncheck in mobile devices.

Any resolution for this?

I am facing the same issue.
looks like mat-option does not support float property and gives this kind of behaviour to the form.

Any suggestion for an alternate of float ??