md-step cut off ripple effect

[milanstamenkovic]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Visible ripple effect in all positions

What is the current behavior?

Md-step cut off ripple effect of checkbox close to edges

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

"@angular/animations": "^4.4.4",
"@angular/cdk": "^2.0.0-beta.11",
"@angular/common": "^4.4.4",
"@angular/compiler": "^4.4.4",
"@angular/core": "^4.4.4"
"@angular/material": "^2.0.0-beta.10",

Is there anything else we should know?

[josephperrott]

This is caused by the CSS rule in stepper:

.mat-horizontal-stepper-content {
  overflow: hidden;
}

Since the mat-checkbox is sitting in the upper left corner of the space of the stepper's content, it does not show the ripple overlay as they do not offset space. An option would be to put a margin around the mat-checkbox to create the offset space needed.

[ricardosaracino]

weak hack

.mat-horizontal-content-container {
padding: 0 20px !important;
margin: 0 -20px !important;
}

[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.}