MdButton onclick GUI goes wrong, its border become distorted bigger on each click

[14Muhammad]

Bug:

MdButton onclick GUI goes wrong, its border become distorted bigger on each click

What is the expected behavior?

It should not distorted on click event

What is the current behavior?

It border in spreads towards bottom side.

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

Angular version 2.0.0-rc.5
Material version 2.0.0-alpha.7-3
OS Windows
Google chrome

[RoxKilly]

This error was not present in alpha 6. I first noticed it when I upgraded from 6 to alpha 7-2 and it also affects 7-4

I think the problem may have to do with the button ripple styling taking ever more space with each click. After a few clicks, the scroll bars appear even though no content is visible.

To reproduce:

• Open this plunker
• In the HomeComponent, click the button ng-Material button 5 or 6 times. You'll see the scroll bars appear.
• In the LazyLoadedComponent, click the button Regular button. No scroll bar appears even though the templates for the two components are the same.

In HomeComponent, changing: <button md-raised-button ....> to a simple <button...> will make the issue go away.

[armno]

It looks like <div class="md-ripple-background">'s are created every time the button is clicked and get bigger but they don't go away.

Screenshot taken from @RoxKilly 's plunkr:

[msegers]

Can confirm this happens on all my forms. I was thinking it was an issue with my own custom styling though couldn't find the problem.

[cladera]

Same issue here

[RoxKilly]

Disabling the ripple effect on the button gets rid of this for me.

<button md-raised-button [disableRipple]="true">click me</button>

See the HomeComponent on this plunkr.

[ivoviz]

See #972. Just simply load the core.css file from @angular2-material/core/style/core.css. Should be mentioned in the docs.

[RoxKilly]

@ivoviz Thanks for linking that other discussion. That's helpful.

[jelbourn]

Closing this into #1139

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