md-ripple-container not present

[gkaimakas]

I have installed angular-material using bower and I am trying to create a button with a rippling effect, just like in the demos.

My code looks like this

<md-content layout layout-fill>
        <md-button>
            submitLogin
        </md-button>
</md-content>

When I've inspected the elements from the demos and my element, I saw that there exists a div in the demos

<div class="md-ripple-container"></div>

that is not present in my button.

Could this be a bug or am I missing something here?

[ajoslin]

It gets lazily created the first time you touch/mousedown the button.

[gkaimakas]

Well, it isn't created for me no matter what I do and I get no ripple effect. The only thing I get is this piece of code

<button class="md-button md-default-theme" ng-transclude="" tabindex="0">
    <span class="ng-binding ng-scope">
        submitLogin
    </span>
</button>

[gkaimakas]

Well I found what was wrong with my setup,

I was referencing jQuery and bootstrap's js files prior to angular's and angular material's files so something was breaking.

This has to be a bug I guess

[ajoslin]

That shouldn't be a problem... Reopening

[JayKan]

I was having a similar issue with the "md-ripple-container" div class, instead of checkBoxes I was using radioButtons.

UPDATE: (Tried reloading AngularJS prior loading jQuery)
I was able to resolve my ripple effect issue when I loaded my angularJS file prior to my jQuery.

BEFORE:
I had jQuery loaded before my AngularJS. For some reasons, when jQuery is loaded before AngularJS, the

was not appending to the transcluded content causing my radioButtons/checkBoxes not having ripple effect at all.

AFTER:
I had AngluarJS loaded before jQuery. After making that small adjustment, my

was appended to the right translcuded content. Ripple effect works under this circumstance.

Not really sure if this issues relates to AngularJS Material or jQuery, but in this case, loading order matters for when if you want to have the ripple effect for your checkboxes or radio buttons. With this said, I still would like to understand where the issue was causing from & why loading order matters in this scenario. If somebody else is able to figure this out or have some other insights, please feel free to update. Thanks!

[bhouser]

From the Angular documentation here: https://docs.angularjs.org/api/ng/function/angular.element

If jQuery is available, angular.element is an alias for the jQuery function. If jQuery is not available, angular.element delegates to Angular's built-in subset of jQuery, called "jQuery lite" or "jqLite."

Is it possible that some parts of angular-material only work with jqLite? Because changing the order of the files as described, determines whether angular uses jqLite or full jQuery

[gkaimakas]

Hello, just wondering if there is any progress regarding that bug