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?

[ivoviz]

@dozingcat Indeed, I can confirm that adding core.css solves every problem, although it would be nice to have it automatically included somehow. (FYI: same thing happening when overlay.css is not included, the menu element (and probably others as well) is just positioned totally off.)

[BenevidesLecontes]

@ivoviz adding core.css solved the scroll problem?

[ivoviz]

@BenevidesLecontes Yes it did for me.

[BenevidesLecontes]

This Ripple effect doesn't seem reasonable, I can't even seen the effect on dark background.

[fernandogomesdf]

@colinfang thank you, it was my mistake

[Mufasa]

Hi,

I am experiencing the same issue in my angular 2 app and was wondering how I can get hold of the core.css file that @ivoviz claims will solve this issue?

Alternatively, can anyone give me an ETA as to when this is officially likely to get fixed?

Thanks in advance

[jelbourn]

It is in node_modules/@angular2-material/core

[sspilleman]

styleUrls: [
    '../../node_modules/@angular2-material/core/style/core.css',
    '../../node_modules/@angular2-material/core/overlay/overlay.css',
    '../../public/styles/main.scss'
]

[Mufasa]

Thanks both - that fixed my issue.

BTW: I had also reported this at Google Groups - angular-material2 and have mentioned these work-arounds there as well.

[xhite]

@jelbourn @sspilleman it doesn't work for me on alpha7-4. The issue persists even after loading those css files

[colinfang]

@xhite Maybe because of #1004?

[jelbourn]

You should load the css files with a <link> element rather than styleUrls in a component.

alpha.7-4 isn't all the way up to master; it only includes very minor changes that won't affect most users (in this case fixing an issue with ngc running on the ripple).

[xhite]

@jelbourn thanks it works when loading globally with <link>

[mentatxx]

Also you can just disable ripple for a while

<button md-mini-fab [disableRipple]="true">
    <md-icon>add</md-icon>
</button>

[RoxKilly]

@jelbourn If you get the chance, please state briefly why you chose to put the styles in a separate CSS that we have to link to, rather than stay consistent with Angular's isolated scopes approach that keeps styles within the block scope of their component. Is this just temporary?

[jelbourn]

There are some styles that are used between multiple components (such as ripples), so including them directly in the component css instead of globally would lead to a pretty sizable chunk of duplicate payload.

[jelbourn]

Closing into #1139

[mgpeng]

Using rc5 and m2 alpha7-4, md-menu html like this:

     <md-menu>
          <button md-menu-item> Refresh </button>
          <button md-menu-item> Settings </button>
          <button md-menu-item> Help </button>
          <button md-menu-item disabled> Sign Out </button>
      </md-menu>

showed like this after rendering:

  <md-menu _ngcontent-dup-2 role="menu">
       <!--template bindings={}-->
       <!--template bindings={
            "ng-reflect-ng-if":"false"
           }--->
  </md-menu>

include <link rel="stylesheet" href="vendor/@angular2-material/core/style/core.css" /> in index.html nothing changed.

[KKrisu]

Currently (angular 2.0, material 2.0.0-alpha.9) the solution is to include theme in styles.css like:

/* You can add global styles to this file, and also import other style files */
@import '../node_modules/@angular/material/core/theming/prebuilt/indigo-pink.css';

[alexlevy0]

I'm also with angular 2.0, material 2.0.0-alpha.9 a solution is to create theme doc and link to your project.

We need to @include md-core();

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