Weird ripple effect

[BenevidesLecontes]

Bug, feature request, or proposal:

[x] Bug

What is the expected behavior?

Expecting ripple effect on buttons

What is the current behavior?

On click ripple effect makes my button wide and ripple color appears like in image below

#### What are the steps to reproduce?

<button md-button md-ripple [md-ripple-color]="rippleColor" (click)="openSideNav($event)"  type="button"
                *ngIf="navigationUrl!=='/' && navigationUrl!=='/login'">
            <md-icon>menu</md-icon>
        </button>

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

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

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

Angular material alpha.7, chrome 52.0.2743.116 (64-bit) MacOS Sierra

Is there anything else we should know?

I'm trying to use the ripple effects on buttons am I missing something? I have my imports like this:

imports: [
        BrowserModule,
        MdCardModule,
        MdInputModule,
        MdIconModule,
        MdListModule,
        MdSidenavModule,
        MdToolbarModule,
        MdButtonModule,
        MdTabsModule,
        MdRippleModule,
        ReactiveFormsModule,
        MdMenuModule,
        FormsModule,
        RouterModule.forRoot([...routes], {})
    ]

[jelbourn]

@BenevidesLecontes can you reproduce the issue in a pluker or similar? I don't follow on your steps to reproduce.

[BenevidesLecontes]

@jelbourn git escaping the html, i update with what i'm using to make this ripple showing like this. And i'll try to make the plunker work with rc5, after that i'll try to update with plunker.

[jelbourn]

cc @dozingcat

[dozingcat]

md-button uses the ripple effect by default; you don't need to (and shouldn't) add a md-ripple attribute. You can set the disableRipple property to true to disable the ripple.

[BenevidesLecontes]

@dozingcat but if i don't use the attribute md-ripple i can't change the ripple color, i need to disable it and then use the atribute to set the color?

[BenevidesLecontes]

@jelbourn @dozingcat also md-ripple is creating scroll on my page after several clicks. I think this the cause.

[dozingcat]

If you get the Plunker set up I can take a look. There's currently not a supported way to change the ripple color on md-buttons. Disabling the existing ripple and adding your own might be a workaround, but that's not the intended use.

[BenevidesLecontes]

@dozingcat any plunker with material alpha 7 and rc5 to fork? I Forked from here, but i can't make it work.

[sunshineo]

+1
I'm experiencing exactly the same thing.
And I only have 2 things: toolbar and button
The button is inside the toolbar. Not sure if that matters or not.
But what definitely matters is that from the beginning, the ripple works as expected inside the button, but if you click on the button, then the ripple area become really big.

[fernandogomesdf]

I think the folowing error is something related, after upgranding alpha.7 and angular rc.5 : Can't bind to 'md-ripple-trigger' since it isn't a known property of 'div'. ("*ngIf="isRippleEnabled()" class="md-button-ripple" [class.md-button-ripple-round]="isRoundButton()" [ERROR ->][md-ripple-trigger]="getHostElement()" [md-ripple-color]="isRoundButton() ? 'rgba(255, 255, 255, 0.2)"): MdButton@0:180

[colinfang]

@fernandogomesdf I encountered this error as well, but it disappeared as soon as I import MdButtonModule instead of using directives. See #973

[colinfang]

I have got the same problem.

Each click of the bottom inserts a

<div class="md-ripple-foreground md-ripple-fade-in"
 style="left: -12.3584px; top: -17.7959px; width: 64.7168px;
 height: 64.7168px; transition-duration: 0.1s;
 background-color: rgba(255, 255, 255, 0.2);"></div>

Into my html, and it keeps stacking and never goes away.

[ivoviz]

@dozingcat Here is a plunker with RC.5 and alpha.7 to demonstrate the issue. Just press the button a couple of times and you'll see the vertical scrollbar appears. As said by @colinfang above, every time you press the button those divs stack up.

[BenevidesLecontes]

@dozingcat @ivoviz and also notice in this plunker, no ripple effect after all.

[dozingcat]

The problem may be that the ripples depend on styles in core.css, which needs to be included in the page (for example https://github.com/angular/material2/blob/master/src/demo-app/index.html#L17 in the demo app). @jelbourn was there going to be a way to automatically include this?