ripple effect is not working #353

gjgit · 2015-01-09T11:44:27Z

ripple effect is not working how to enable ripple effect

timhovius · 2015-01-09T13:49:00Z

Yes I have the same problem. I added the javascripts and the following code:

$(function() {
    $.material.init();
});

I have no console errors.

FezVrasta · 2015-01-09T14:36:50Z

are you using the latest master or the 0.2.1 pre release?

this is based on the latest master and works perfectly:
http://codepen.io/FezVrasta/pen/ihmea

timhovius · 2015-01-09T15:06:12Z

I inspected your code and found that I was forgot to include the ripple css

FezVrasta · 2015-01-09T15:13:11Z

okay nice :)

krazyeom · 2015-01-10T02:28:14Z

How do i add ripple css on Meteor?
Checkbox and Radio button are disappear.

gjgit · 2015-01-10T06:30:05Z

i"m developing in asp.net and still i can"t able to figure out why ripple effect is not availble ... i did all the things

gjgit · 2015-01-10T06:31:51Z

i "m using visual studio still i cant able to add the ripple effect

FezVrasta · 2015-01-10T08:06:44Z

Are you using input=button? Ripple can't work on self closing elements

timhovius · 2015-01-10T11:24:07Z

You also need to execute the following script for the ripple effect:

$(function() {
    $.material.init();
});

krazyeom · 2015-01-10T23:26:30Z

I am using Meteor platform. so Bootstrap Material Design was installed by meteor add fezvrasta:bootstrap-material-design.

Button's ripple effect works correctly. but Check box, radio button and some effect is not working now.

I just install material design, not added anything using by blow scripts.

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="css/ripples.min.css" rel="stylesheet">
<link href="css/material-wfont.min.css" rel="stylesheet">

....
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<script src="js/ripples.min.js"></script>
<script src="js/material.min.js"></script>

How do I use Checkout, CheckBox? I have no idea to implement it.

krazyeom · 2015-01-10T23:38:39Z

Sorry about that. It works correctly on main.html. there are some mistake in the tag

siddhsuper · 2015-01-16T19:10:08Z

Hi I am new to bootstrap angular material,
I am not getting ripple effect on a anchor.

Please help; I have given a screen shot of the css and js file I referred and the anchor example shown in bootstrap material design.

Regards,
Sid

soniar4i · 2015-02-03T14:46:16Z

I'm having problems to get the ripple to work on Safari 7.1.3 . It doesn't show any problem and it works on Chrome but in Safari the ripple begins but the transition doesn't continue. Just like the image below.

Thanks in advance :)

FezVrasta · 2015-02-03T14:57:09Z

This theme was not tested on safari mobile yet. Sorry.

soniar4i · 2015-02-03T15:06:23Z

Hi! I know how to solve the issue, as @irwing-reza pointed a while ago on #223 it has missing ":" on -moz-transform and -webkit-transform on the ripple javascript. But you forgot to include those changes on your compressed ripples.min.js too :)

Thanks anyways

markadward · 2015-03-09T08:56:46Z

ripple ink effect is not working on desktop safari and also on mobiles. One more this i am entegerating dropdown exctly but it is not working Please help me to sort out this.

Thanks

soniar4i · 2015-03-09T10:39:17Z

@markadward make sure that you have ":" on -moz-transform and -webkit-transform ripples.min.js

FezVrasta · 2015-03-09T10:42:37Z

I use this now:

$ripple
      .css({
        "-ms-transform": "scale(" + size + ")",
        "-moz-transform": "scale(" + size + ")",
        "-webkit-transform": "scale(" + size + ")",
        "transform": "scale(" + size + ")"
      })

So it should not be the problem @soniar4i

soniar4i · 2015-03-09T11:11:37Z

Yes, it's true. I was thinking on the previous version @FezVrasta.

@markadward how it behaves when you click on a button with ripple effect. I've been working with safari on imac and I don't have any trouble with ripple or dropdown buttons.

phtn · 2015-11-03T05:54:58Z

with Meteor

Template.homepage.rendered = () => {
$.material.init()
}

material has to initialize on render

ibgithub · 2016-01-06T10:42:07Z

I also meet the same problem, the ripple effect is not working, I already add ripples.cs and ripples.js:

    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="bower_components/bootstrap-material-design/dist/css/material.css" />
    <link rel="stylesheet" href="bower_components/bootstrap-material-design/dist/css/ripples.css" />

    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="bower_components/bootstrap-material-design/dist/js/material.js"></script>
    <script src="bower_components/bootstrap-material-design/dist/js/ripples.js"></script>

What should I need to add? please someone help this situation.

ibgithub · 2016-01-07T10:22:03Z

I create simple html index using bootstrap-material-design and the ripple effect is exist, and then I compare with my application (I am using jhipster), the different is: there is no div class="ripple-contaner" on jhipster component.

while on my simple index.html using bootstrap-material-design there is div class="ripple-contaner"

Why on my application the div class="ripple-container" is not exist? I already register the ripples.js and ripples.cs

ibgithub · 2016-01-07T11:33:24Z

I want to report to you guys that I already solved my problem with adding two files (css and js) from this link http://codepen.io/anon/pen/gPmJZR or http://codepen.io/zavoloklom/pen/Gubja (both are the same), I save it as ripples-alt.css and ripples.alt.js and I add class ripple-effect into my button or my menu, and now it's work (I still don't know why it not working by default, may be it conflict with other component).

    <link rel="stylesheet" href="bower_components/bootstrap-material-design/dist/css/material.css" />
    <link rel="stylesheet" href="bower_components/bootstrap-material-design/dist/css/ripples.css" />
    <link rel="stylesheet" href="bower_components/bootstrap-material-design/dist/css/ripples-alt.css" />


    <script src="bower_components/bootstrap-material-design/dist/js/material.js"></script>
    <script src="bower_components/bootstrap-material-design/dist/js/ripples.js"></script>
    <script src="bower_components/bootstrap-material-design/dist/js/ripples-alt.js"></script>

and in my button I add:
class="btn btn-raised btn-primary ripple-effect"

watsonkelvin · 2016-01-15T01:18:21Z

I also do not see the ripple effect. I installed using meteor add fezvrasta:bootstrap-material-design.
Here are the tags inside my tags

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.7/css/bootstrap-material-design.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.7/css/ripples.min.css" rel="stylesheet">  
<link href="https://cdn.rawgit.com/FezVrasta/dropdown.js/master/jquery.dropdown.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.7/js/material.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.7/js/ripples.min.js"></script>

rosskevin · 2016-01-15T02:17:34Z

@watsokel, @ibgithub, this issue has been closed since May of 2015. Please file new issues, and for personal support please use stackoverflow. Regarding meteor, the package has not been updated for a long time, please see Meteor package update #769. We need help from the community if you want meteor support.

FezVrasta added the more info required label Jan 9, 2015

gjgit closed this as completed Jan 10, 2015

gjgit reopened this Jan 10, 2015

FezVrasta closed this as completed Mar 17, 2015

mdbootstrap locked and limited conversation to collaborators Jan 15, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ripple effect is not working #353

ripple effect is not working #353

gjgit commented Jan 9, 2015

timhovius commented Jan 9, 2015

FezVrasta commented Jan 9, 2015

timhovius commented Jan 9, 2015

FezVrasta commented Jan 9, 2015

krazyeom commented Jan 10, 2015

gjgit commented Jan 10, 2015

gjgit commented Jan 10, 2015

FezVrasta commented Jan 10, 2015

timhovius commented Jan 10, 2015

krazyeom commented Jan 10, 2015

krazyeom commented Jan 10, 2015

siddhsuper commented Jan 16, 2015

soniar4i commented Feb 3, 2015

FezVrasta commented Feb 3, 2015

soniar4i commented Feb 3, 2015

markadward commented Mar 9, 2015

soniar4i commented Mar 9, 2015

FezVrasta commented Mar 9, 2015

soniar4i commented Mar 9, 2015

phtn commented Nov 3, 2015

ibgithub commented Jan 6, 2016

ibgithub commented Jan 7, 2016

ibgithub commented Jan 7, 2016

watsonkelvin commented Jan 15, 2016

rosskevin commented Jan 15, 2016

ripple effect is not working #353

ripple effect is not working #353

Comments

gjgit commented Jan 9, 2015

timhovius commented Jan 9, 2015

FezVrasta commented Jan 9, 2015

timhovius commented Jan 9, 2015

FezVrasta commented Jan 9, 2015

krazyeom commented Jan 10, 2015

gjgit commented Jan 10, 2015

gjgit commented Jan 10, 2015

FezVrasta commented Jan 10, 2015

timhovius commented Jan 10, 2015

krazyeom commented Jan 10, 2015

krazyeom commented Jan 10, 2015

siddhsuper commented Jan 16, 2015

soniar4i commented Feb 3, 2015

FezVrasta commented Feb 3, 2015

soniar4i commented Feb 3, 2015

markadward commented Mar 9, 2015

soniar4i commented Mar 9, 2015

FezVrasta commented Mar 9, 2015

soniar4i commented Mar 9, 2015

phtn commented Nov 3, 2015

with Meteor

ibgithub commented Jan 6, 2016

ibgithub commented Jan 7, 2016

ibgithub commented Jan 7, 2016

watsonkelvin commented Jan 15, 2016

rosskevin commented Jan 15, 2016