Topic: Disappearing button text using waves effect inside an accordion
When I place a button with a waves effect in an accordion, then the button text sometimes disappears. When you hover over the button the text reappears. I've uploaded a video reproducing the problem here: https://www.dropbox.com/s/dzabgj05jhfhc52/buttonbug.mov?dl=0
The code from the video can be found here: (minus the credentials for mdbootstrap pro whih need to be added to package.json) https://github.com/karel1980/mdbootstrapbugs
Can you advise how to work around this?
Hi @Damian Gemza,
Did you find time to double check if things work on your side with enabled buttons?For you convenience I've published the build to github pages:https://karel1980.github.io/mdbootstrapbugs/
For clarity: I'm still having the missing text with mdbootstrap 7.4.2 and latest chrome (73.0.3683.75)
Regards, Karel
Arkadiusz Idzikowski staff commented 5 years ago
Dear Karel,
Thank you for all the information and demos. We are still working on this issue.
Dear Karel,
Please try to update the MDB Angular to the latest 7.4.2 version, and check, if the problem still exists. I'm not able to reproduce it on Chrome 72 & MDB 7.4.2.
Best Regards,
Damian
karel1980 pro commented 5 years ago
Upgrading to mdb 7.4.2 did not help. I tried with Chrome 72 both on OSX and Linux. I noticed that the last thing I tested with was not in the github project. I just pushed it. Can you try with my (updated) sample (the master branch on https://github.com/karel1980/mdbootstrapbugs)
karel1980 pro commented 5 years ago
Here is an updated screen recording https://www.dropbox.com/s/xfctpqzxitmcmr5/mdbootstrap_buttontext.mov?dl=0
The button text also appears after displaying a javascript alert(), which is really curious to me.
Thanks for looking into this again.
Arkadiusz Idzikowski staff commented 5 years ago
Thank you for letting us know about that, we will take a look at it again.
The solution with z-index provided above by Damian Gemza does not solve this problem?
karel1980 pro commented 5 years ago
The solution with the z-index only works for enabled buttons.
I have updated the example - added a few disabled buttons. The problem still persists for disabled buttons (sorry for moving the goalpost - I think this is the only relevant difference with our application; There were no other z-index or position modifiers in the dom tree).
Screenshot: https://www.dropbox.com/s/uj808my0t3u3e7e/Screenshot%202019-03-04%20at%2009.34.18.png?dl=0
Thanks for your support. Your solution seems to work for the example I provided, but we're still seeing the problem in our real application. I'll investigate using the z-index clue in mind and let you know if anything relevant still pops up.
Dear Karel,
This problem will be fixed with the next release of MDB Angular.
As a workaround, please add the below styles to the styles.scss file in your project:
.accordion {
.waves-effect, .waves-light {
z-index: unset;
}
}
Best Regards,
Damian
Thank you for the code and all the information. We will take a closer look at this and try to find the cause of the problem.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.4.1
- Device: Macbook
- Browser: Chrome 72
- OS: OSX
- Provided sample code: No
- Provided link: Yes