Topic: Material Select - Labels are hidden if parent has a background
Expected behavior
Labels are visible after opening the select contents.
Actual behavior
If a parent (it doesn't matter at which level) of the .mdb-select element has a background, the label isn't visible. This is caused the property z-index of the label itself which is set to -1. Changing the z-index to a higher value (e.g. 1) fixes this issue, but causes subsequent problems. In this case the select-wrapper won't show the dropdown-contents if you click on the label directly (but aside it), since it's not recognized by the event listener.
Resources (screenshots, code snippets etc.)
See https://mdbootstrap.com/docs/jquery/forms/select/#color In the Example, simply add the style background:white to the div.section-preview, which will immediately hide all labels in the example. Changing the z-index to one for label.mdb-main-label elements will show the labels, but causes the described issue of clicking the label.
Hi,
I see this bug, thank you for noticing this. We will fix this bug as soon as possible.
Best, Marta
dzazueta pro commented 6 years ago
https://mdbootstrap.com/snippets/jquery/piotr-glejzer/692528
Marta Szymanska staff pro premium commented 6 years ago
Hi,
What about with this snippet?
Best, Marta
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.7.7
- Device: all
- Browser: all
- OS: all
- Provided sample code: No
- Provided link: Yes