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

scottwilliams priority asked 1 year 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.)

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!

Kamila Pieńkowska staff answered 1 year 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 priority answered 1 year 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.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Priority
  • 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