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
Hi Jack McDonagh,
Please send me Your code to email@example.com or paste it here. I’d like to investigate it to find the solution for You.
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>
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.
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?
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.
Please login or Register to submit your answer