Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Ripple Effect not working on card columns

Jack McDonagh free asked 7 years ago

Hello,

I have an issue with the ripple effect on buttons when they are used in card columns.

I have buttons on each card: https://gyazo.com/00aa9527fd6d2a50242ea813b286c5e7

The ripple effect on the buttons in the first column work fine but in the other two columns the ripple effect does not work. The text disappears when it is clicked and it then re appears a second later.

Here is the button in the second column when it is being clicked: https://gyazo.com/3f19d0bb6237226f1e4d47802f3c114e

Thanks

euclidwebteam pro answered 6 years ago

Thanks for the response Mikolah. I did try wrapping the .card-body by .card but that didn't make a difference. The only thing I have been able to pin it down to is the use of .card-columns. When I stop using that, then the ripples work. But I need to use the .card-columns layout to space the cards around each other better. Do you know if there is some conflict with the .card-columns class?  

Mikołaj Smoleński staff commented 6 years ago

Can You try to wrapp card not by card-column which is causing problems, but by more practical standard bootstrap grid? I recommend to use grid instead .card-column class.

Mikołaj Smoleński staff answered 6 years ago

Hi, In our documentation there is the same code in basic card and everything is working correctly: https://mdbootstrap.com/components/cards/ Have You tried to wrap .card-body by .card? There could be a problem while it is the same element as in Your example. Best Regards

euclidwebteam pro answered 6 years ago

Hi Mikolaj, I'm also having this problem and wondered if you were able to resolve it. Here is an example of the problem (note that the button in the card does not have a ripple effect, while the button outside the card does have the effect): 
<div class="card-columns">
   <div class="card card-body">
      <a class="btn-floating btn-sm blue-gradient waves-effect waves-effect"><i class="fa fa-star"></i></a>
   </div>
</div>

<a class="btn-floating btn-sm blue-gradient waves-effect"><i class="fa fa-star"></i></a>

Mikołaj Smoleński staff answered 7 years ago

Hi Jack McDonagh, Please send me Your code to m.smolenski@mdbootstrap.com or paste it here. I'd like to investigate it to find the solution for You. Regards
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • ForumUser: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
Jack McDonagh
0Support score
1Questions 0Answers 0Snippets