Materialize: Button animation not working inside of card

Created on 23 Nov 2014 · 26Comments · Source: Dogfalo/materialize

I have a button inside of a card-footer:

<div class="card blue">
    <div class="card-content">
        <h1>{{ theme.name }}</h1>
    </div>
    <div class="card-footer">
        <p>Built by {{ theme.author }}</p>
        <a class="waves-effect waves-light btn"><i class="mdi-file-cloud"></i>View Theme</a>
    </div>
</div>

When I press the button, the wave effect is not invoked.

If I take the a and place it _outside_ the card-footer, the wave effect is invoked as expected.

How can I maintain the wave effect inside of a card-footer? Thank you.

Source

AlexArchive

Most helpful comment

@ByteBlast Hi, you can trigger the wave effect by adding this into your controller :

Waves.displayEffect();

bpetetot on 2 Jan 2015

👍3

All 26 comments

Hmm I can't seem to recreate the problem. I've tried doing it myself and it seems to be working. Do you have any more information that could help us find the problem?

acburst on 23 Nov 2014

Do button effects happen outside of the card?

On Sat, Nov 22, 2014, 6:11 PM acburst [email protected] wrote:

Hmm I can't seem to recreate the problem. I've tried doing it myself and
it seems to be working. Do you have any more information that could help us
find the problem?

—
Reply to this email directly or view it on GitHub
https://github.com/Dogfalo/materialize/issues/136#issuecomment-64099203.

Dogfalo on 23 Nov 2014

@Dogfalo Yeah they do.

AlexArchive on 23 Nov 2014

@acburst Your comment prompted me to evaluate the problem further and as it happens, the problem happens specifically _within a col_:

<div class="row">
    <div class="col s12 m6" ng-repeat="theme in themes">
        <div class="card blue">
            <div class="card-content">
                <h1>{{ theme.name }}</h1>
            </div>
            <div class="card-footer">
                <p>Built by {{ theme.author }}</p>
                <a class="waves-effect waves-light btn"><i class="mdi-file-cloud"></i>View Theme</a>
            </div>
        </div>
    </div>
</div>

AlexArchive on 23 Nov 2014

just tried that snippet and its still working for me

acburst on 23 Nov 2014

Hold on bud. I will try and produce an isolated example of the problem.

AlexArchive on 23 Nov 2014

Html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Winball</title>
    <link rel="stylesheet" href="content/css/style.css" media="screen,projection"/>
</head>
<body>
    <div class="row">
        <div class="col s12 m6" >
            <div class="card blue">
                <div class="card-content">
                    <h1>Title</h1>
                </div>
                <div class="card-footer">
                    <p>Paragraph</p>
                    <a class="waves-effect waves-light btn"><i class="mdi-file-cloud"></i>View Theme</a>
                </div>
            </div>
        </div>
    </div>
    <script src="materialize/js/materialize.js"></script>
    <script src="bower_components/jQuery/dist/jquery.js"></script>
</body>
</html>

Sass:

@import "../../materialize/sass/materialize";

AlexArchive on 23 Nov 2014

Are you linking your jQuery file after our scripts? Because jQuery is a dependency

acburst on 23 Nov 2014

How embarrassing :fearful: Thank you.

Well switching those around makes the button effect work in the self-contained example.

I am convinced that the button effect worked outside of the col before. I will investigate.

AlexArchive on 23 Nov 2014

I have no idea what happened. I reloaded the original page and now it works. Sorry for the inconvenience lads and thank you for the help.

AlexArchive on 23 Nov 2014

Hold on. It's broken again.

The problem seems to happen when an Angular template is involved:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Winball</title>
    <link rel="stylesheet" href="content/css/style.css">
</head>

<body ng-app="winball" ng-controller="mainController">
    <div class="centered-container">
        <div class="row">
            <div class="col s12 m6" ng-repeat="theme in themes">
                <div class="card teal">
                    <div class="card-content">
                        <h1>{{ theme.name }}</h1>
                    </div>
                    <div class="card-footer">
                        <p>{{ theme.author }}</p>
                        <a href="" class="waves-effect waves-light teal btn">Stuff</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 3rd party libraries -->
    <script src="bower_components/jQuery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="materialize/js/materialize.js"></script>

    <!-- Load app main script -->
    <script src="app/app.js"></script>

    <!-- Load controllers -->
    <script src="app/controllers/mainController.js"></script>

    <!-- Load custom directives -->
    <script src="app/directives/material-nav.js"></script>

</body>

</html>

Any thoughts?

AlexArchive on 23 Nov 2014

I don't think it has anything to do with the button being inside a card

Dogfalo on 23 Nov 2014

@Dogfalo Rather something to do with the code being inside of an Angular template? I really do not know at this point.

Consider the code from my previous comment. If you take the a tag and place it _outside_ the grid then the animation works. That is all I know.

AlexArchive on 23 Nov 2014

Sorry I'm not too familiar with angular so its pretty hard to debug something like this.

Are there any console errors while running this?

acburst on 23 Nov 2014

It is hard for us to test this because we do not have the rest of your angular files. What version of jQuery are you using?

Dogfalo on 23 Nov 2014

@acburst No console errors.

@Dogfalo I understand that mate. I am working on another demo now :smile:

AlexArchive on 23 Nov 2014

Yeah, when it doesn't work with Angular templates, all the effects don't work.

LouisWayne on 28 Nov 2014

@ByteBlast Hi, you can trigger the wave effect by adding this into your controller :

Waves.displayEffect();

bpetetot on 2 Jan 2015

👍3

The effect is not working inside angular template. I too have similar problem.
If I use a template it doesn't work but without template it does

ankitparasher on 8 Jan 2015

Waves effect will now work on angular templates

Dogfalo on 18 Jan 2015

Good stuff lads.

AlexArchive on 18 Jan 2015

You guys are awesome :D

ankitparasher on 18 Jan 2015

Waves don't seem to be working on Angular 2.0 templates.

Queatz on 28 Dec 2015

Update:

If you are loading async your external JavaScript files like I do for improved performance, call manually Waves.displayEffect(); in your loaded callback !

I have the same issue, and the bug is only if I load ALL the external scripts asynchronous (which for now are only jQuery & materialize) !

I have built my own asyncLoad() handler where I define which scripts, in which order and custom callbacks to execute when they're ready, handler which worked as expected for years until now !

See bellow the console log for the event order:

loading jQuery
loaded jQuery
I am jQuery function(a, b)
callback for jQuery
loading materialize
loaded materialize
callback for materialize

I have even included a timeout between jQuery & materialize scripts (two seconds) and same result.
Funny thing is that the rest of the code used until now is working fine (tooltips, slider)

razvanioan on 1 Apr 2016

👍1

@razvanioan - The async behavior seems to be true with Aurelia as well. I had the same issue with animations and it started working once I explicitly called Waves.displayEffect();.

Thank you.