Ripple on mat-row breaks cells in 6.0 version

[vanmxpx]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Ripple on mat-row

What is the current behavior?

Ripple effect last cells padding in material table and breaks all row

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-gd2jqa

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

If it is problem in new ripple logic it may affects not only row component of material controls

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

material 6.0

Is there anything else we should know?

All works fine in previous versions

[simeyla]

Your explanation has unclear english but I believe I'm having the same issue (using mat-table with flex model).

The problem is that the way ripple works is to add a mat-ripple-element inside the table 'row' as the last element.

The new css for version 6 contains the following to add padding to the left and right of a table.

mat-cell:last-child, mat-header-cell:last-child, mat-footer-cell:last-child {
  padding-right: $mat-row-horizontal-padding;

  [dir='rtl'] & {
    padding-right: 0;
    padding-left: $mat-row-horizontal-padding;
  }
}

So as soon as mat-ripple-element is added then the actual table cell is no longer the :last-child so you get a jump because the padding is removed all the cells use the standard flex logic to fill the remaining space.

I don't have a hacky solution - choosing to just ignore it for now and wait for a proper fix.

[EreckGordon]

/* dumb hack to deal with mat-ripple breaking css */
mat-cell:last-child, mat-header-cell:last-child, mat-footer-cell:last-child {
  padding-right: 0px !important;
}

gross !important, hopefully this gets fixed sooner than later

[angular-automatic-lock-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.}