Form multi-select .select-label label class not working


Topic: Form multi-select ".select-label" label class not working

scottwilliams pro premium priority asked 2 years ago

*_Expected behavior_*When the "select-label" class is added to the tag of an MDB multi-select control, the label should transform into its active state regardless if any option is selected.

*_Actual behavior_*The multi-select control ignores the "select-label" class and keeps the label text in the placeholder position until an option is selected.

Resources (screenshots, code snippets etc.)https://mdbootstrap.com/docs/standard/forms/select/#section-multiselect

Any work-arounds would be great. I've exhausted everything I would normally use, but the javascript wipes it all out when the select gets rendered. :(

Thanks in advance!


kpienkowska staff answered 2 years ago

This is not a bug but expected behavior.

I understand that you want multiselect to behave differently but label and outline styles are applied based on state and classlist that is changed with JS after every interaction.

The only thing that you can do is hardcode (overwrite) those styles with custom CSS applied to select-label and select-input.


scottwilliams pro premium priority answered 2 years ago

Hmm seems odd that the label class behaviors would be different. If they are both selects the UX of the label behavior should be the same regardless of being a single select or a multiselect. The current behavior may be expected, but IMHO as a UX designer it's bad UX.

Guess I'll have to hack it myself.


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
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.2.0
  • Device: Macbook Pro
  • Browser: Chrome
  • OS: MacOS Ventura 13.2.1
  • Provided sample code: No
  • Provided link: Yes