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?
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.
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
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.
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
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 6 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 6 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 6 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 6 years ago
The solution with the z-index only works for enabled buttons.
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 6 years ago
Dear Karel,
Thank you for all the information and demos. We are still working on this issue.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: 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