waves not work with bootstrap #144

dongwenting · 2015-11-16T05:22:52Z

my html like this, but I can't see the effect. because of adding bootstrapp css.

 <!DOCTYPE html> 
 <html> 
 <head> 
   <meta charset="utf-8" />
      <meta http-equiv="x-ua-compatible" content="ie=edge" />
      <title>OA</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1" />

   <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" />
   <!-- waves -->
    <link rel="stylesheet" href="//cdn.bootcss.com/node-waves/0.7.2/waves.min.css" />
 </head> 
<body>
<button class="btn btn-default waves-effect waves-button">已审批</button>

<!-- JQuery -->
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- waves -->
<script src="//cdn.bootcss.com/node-waves/0.7.2/waves.min.js"></script>
<script>
$(function() {

});
</script>

The text was updated successfully, but these errors were encountered:

Kaishiyoku · 2015-11-16T05:30:58Z

Hello,

have you tried attaching an initializing Waves manually?

Waves.attach('.button', ['waves-button']);
Waves.init();

I am setting the effects only to certain elements because of potential side effects.

dongwenting · 2015-11-16T05:37:37Z

Yes, I add this into js, but still not work.

 <!DOCTYPE html> 
  <html> 
  <head> 
      <meta charset="utf-8" />
      <meta http-equiv="x-ua-compatible" content="ie=edge" />
      <title>OA</title> 
   <meta name="description" content="OA" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<!-- waves -->
<link rel="stylesheet" href="//cdn.bootcss.com/node-waves/0.7.2/waves.min.css" />
</head> 
 <body>
<button class="btn btn-danger">已审批</button>
<!-- JQuery -->
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>

    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- waves -->
<script src="//cdn.bootcss.com/node-waves/0.7.2/waves.min.js"></script>
<script>
$(function() {
    Waves.attach('.button', ['waves-button']);
    Waves.init();
});
</script>
 </html>

dongwenting · 2015-11-16T05:42:01Z

sorry, i made a mistake, it should be

Waves.attach('.btn', ['waves-button']);
Waves.init();

I can see the effect now ,but not good looking.

Kaishiyoku · 2015-11-16T05:47:34Z

What do you exactly mean? At some buttons I am using waves-light when the button color is too dark. I am currently writing on my phone, I will look at some example code of myself how I used Waves together with Bootstrap 3.

fians · 2015-11-16T06:56:35Z

Sorry, waves currently didn't work well with bootstrap. See #107

Kaishiyoku · 2015-11-16T08:23:24Z

👍

santoshban · 2015-11-30T02:53:49Z

I faced lots of issues with any version of bootstrap.

dongwenting · 2015-11-30T03:03:36Z

I found a css which makes waves work with bootstrap. you can download it and rename it waves.min.css.

    (function(){
        if(typeof(Waves) !== 'undefined'){
            Waves.attach('.btn:not(.btn-icon):not(.btn-float)');
            Waves.attach('.btn-icon, .btn-float', ['waves-circle', 'waves-float']);
            Waves.init();
        }
    })();



/*!
 * Waves v0.7.2
 * http://fian.my.id/Waves 
 * 
 * Copyright 2014 Alfiana E. Sibuea and other contributors 
 * Released under the MIT license 
 * https://github.com/fians/Waves/blob/master/LICENSE 
 */

.waves-effect {
  position: relative;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.waves-effect .waves-ripple {
  position: absolute;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  opacity: 0;
  background: rgba(0, 0, 0, 0.2);
  background: -webkit-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  background: -o-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  background: -moz-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  background: radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  -o-transition-property: -o-transform, opacity;
  transition-property: transform, opacity;
  -webkit-transform: scale(0) translate(0, 0);
  -moz-transform: scale(0) translate(0, 0);
  -ms-transform: scale(0) translate(0, 0);
  -o-transform: scale(0) translate(0, 0);
  transform: scale(0) translate(0, 0);
  pointer-events: none;
}

.waves-effect.waves-light .waves-ripple {
  background: rgba(255, 255, 255, 0.4);
  background: -webkit-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  background: -o-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  background: -moz-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  background: radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
}

.waves-effect.waves-classic .waves-ripple {
  background: rgba(0, 0, 0, 0.2);
}

.waves-effect.waves-classic.waves-light .waves-ripple {
  background: rgba(255, 255, 255, 0.4);
}

.waves-notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

.waves-button,
.waves-circle {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(circle, #ffffff 100%, #000000 100%);
}

.waves-button,
.waves-button:hover,
.waves-button:visited,
.waves-button-input {
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: none;
  outline: none;
  color: inherit;
  background-color: rgba(0, 0, 0, 0);
  font-size: 1em;
  line-height: 1em;
  text-align: center;
  text-decoration: none;
  z-index: 1;
}

.waves-button {
  padding: 0.85em 1.1em;
  border-radius: 0.2em;
}

.waves-button-input {
  margin: 0;
  padding: 0.85em 1.1em;
}

.waves-input-wrapper {
  border-radius: 0.2em;
  vertical-align: bottom;
}

.waves-input-wrapper.waves-button {
  padding: 0;
}

.waves-input-wrapper .waves-button-input {
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
}

.waves-circle {
  text-align: center;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
  border-radius: 50%;
}

.waves-float {
  -webkit-mask-image: none;
  -webkit-box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12);
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
  transition: all 300ms;
}

.waves-float:active {
  -webkit-box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3);
}

.waves-block {
  display: block;
}

ChristianRich · 2016-02-17T03:26:02Z

FYI, I'm having absolutely no issues with Bootstrap and Waves. It works well and looks great.
I have only tried with button elements.

EDIT: I cannot get it working with A elements (links)

fians · 2016-02-21T11:50:17Z

@dongwenting Hi, I don't see any difference if I compare your css with current css of Waves (0.7.4). Am I missing something?

@ChristianRich Hi Christian, can you create new issue for this? So we can investigate it further. Thanks!

dongwenting · 2016-02-21T12:45:18Z

@fians I'm sorry. the difference is not css, but the js. forgive my poor English - -!
As the demo above.
Below js will make waves work with bootstrap.

    (function(){
        if(typeof(Waves) !== 'undefined'){
            Waves.attach('.btn:not(.btn-icon):not(.btn-float)');
            Waves.attach('.btn-icon, .btn-float', ['waves-circle', 'waves-float']);
            Waves.init();
        }
    })();

The below is wrong, because the waves-button class will overlay bootstrap's background-color and border-color.

$(function() {
    Waves.attach('.btn', ['waves-button']);
    Waves.init();
});

fians · 2016-02-21T15:15:58Z

@dongwenting I will figure it out how to make this works. Thanks 👍

fians added the Improvement label Feb 21, 2016

fians added this to the v0.8.0 milestone Feb 21, 2016

fians mentioned this issue Oct 24, 2017

Use overlay wrapper for waves and its ripple effect #178

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

waves not work with bootstrap #144

waves not work with bootstrap #144

dongwenting commented Nov 16, 2015

Kaishiyoku commented Nov 16, 2015

dongwenting commented Nov 16, 2015

dongwenting commented Nov 16, 2015

Kaishiyoku commented Nov 16, 2015

fians commented Nov 16, 2015

Kaishiyoku commented Nov 16, 2015

santoshban commented Nov 30, 2015

dongwenting commented Nov 30, 2015

ChristianRich commented Feb 17, 2016

fians commented Feb 21, 2016

dongwenting commented Feb 21, 2016

fians commented Feb 21, 2016

waves not work with bootstrap #144

waves not work with bootstrap #144

Comments

dongwenting commented Nov 16, 2015

Kaishiyoku commented Nov 16, 2015

dongwenting commented Nov 16, 2015

dongwenting commented Nov 16, 2015

Kaishiyoku commented Nov 16, 2015

fians commented Nov 16, 2015

Kaishiyoku commented Nov 16, 2015

santoshban commented Nov 30, 2015

dongwenting commented Nov 30, 2015

ChristianRich commented Feb 17, 2016

fians commented Feb 21, 2016

dongwenting commented Feb 21, 2016

fians commented Feb 21, 2016