Topic: Form multi-select ".select-label" label class not working
*_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!
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.
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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