Topic: Material Select - Labels are hidden if parent has a background

marvet free asked 5 years ago


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.


Marta Wierzbicka staff answered 5 years ago


Hi,

I see this bug, thank you for noticing this. We will fix this bug as soon as possible.

Best, Marta


dzazueta pro commented 5 years ago

https://mdbootstrap.com/snippets/jquery/piotr-glejzer/692528


Marta Wierzbicka staff commented 5 years ago

Hi,

What about with this snippet?

Best, Marta



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: MDB jQuery
  • MDB Version: 4.7.7
  • Device: all
  • Browser: all
  • OS: all
  • Provided sample code: No
  • Provided link: Yes