materialize: Button animation not working inside of card

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.

About this issue

Original URL
State: closed
Created 10 years ago
Comments: 26 (4 by maintainers)

Most upvoted comments

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

Waves.displayEffect();

bpetetot on Jan 2, 2015

@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.

AmareshKulkarni on May 21, 2016

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 Apr 1, 2016