Components: Tab's change animation breaks rendering of mat-paginator (mat-table) and mat-checkbox contained in the tabs

[ps1dr3x]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Tab is changed and the contained view is rendered correctly

What is the current behavior?

The animation on tab change causes mat-paginator and checkboxes to be pushed up and out of the view of the table row/cell. It is curious that if a very quickly switch from tab A to tab B and back to A is made, A is rendered correctly.

What are the steps to reproduce?

I have a mat-tab-group with three tabs, each one containing a paginated mat-table with some mat-checkbox, when i switch from a tab to another, all the views inside tabs are incorrectly rendered.
I'll provide an example as soon as i have a moment.

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

Angular: 5.0.2
Material: 5.0.0-rc0
OS: Windows 10 (I'll try to reproduce on Debian sid later at home)
Typescript: 2.6.1
Browser: Electron 1.7.9 (Chromium: 58.0.3029.110, V8: 5.8.283.38)

Is there anything else we should know?

User @abcox described the same problem on #4227
Maybe it's related to #5269

[josephperrott]

Can you provide a reproduction in either Plunker or StackBlitz. This will aide us in finding the issue you are seeing.

[abcox]

Plunker of my issue related to animation rendering checkbox incorrectly in table row.

Perhaps a work-around on the component CSS can resolve this, but I am unable to compose such.

BTW.. while disableRipple does work, it does not resolve the rendering of top: -15px by style div.mat-ripple.mat-checkbox-ripple

UPDATE: Plunker updated with work-around using <input type="checkbox"/> styled to theme.

[julianobrasil]

@abcox, curiously, if you get rid of all your custom classes, and replace your <input type="checkbox"> with any other element, it works fine: https://plnkr.co/edit/B3fJLuV1Y2DPK9G0tlrM?p=preview

[wandri]

Same problem here. The work-around of @julianobrasil doesn't work for me with angular material 5.0.0-rc.1 and 5.0.0-rc0.

What is strange is:

• When I click on the checkbox, it moves to the top. But in the debuger, when I remove one of the styles of _.mat-checkbox-ripple_ and then, I add it again. the checkbox get back to its normal position.

EDIT: a workaround is:

  mat-cell {
    overflow: visible;
  }

[skonx]

Hi there. I've fixed this strange issue with a   between the mat-chechbox tags.

[julianobrasil]

@josephperrott, you've marked this issue with a "cannot reproduce" label but by visiting https://plnkr.co/edit/IF1rRPZp1H53DcnN3Vv8?p=preview, I can see it happening in my Windows 10 machine using:

1. Chrome 63.0.3239.108 (the checkbox is shifted up considerably, like it'is shown in the animated gif above)
2. IE11
3. Edge

It's working fine in the last beta of Firefox.

[BTW]: the label was set a few days before I paste the first plunk link over here. I don't think you were aware of it.

[andrewseguin]

This seems to be a problem separate from table, but exposed by how the cell styles work.

Here's an example of the checkbox's behavior in the same CSS structure:
https://stackblitz.com/edit/angular-zc9dkd?file=app/checkbox-overview-example.html

[andrewseguin]

Note that the best way to work around this for now was posted above. Use overflow: visible for the affected cells

[andrewseguin]

Closing as dupe of #8600

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}