Topic: Ambiguous form labels
Expected behavior When the "active" class is added to a form-control, the floating label permanently stays at the top.
Actual behavior The floating label starts at the top, but as soon as the input gets focus, then blur, the active class is removed and the floating label goes back inside the input text block like a placeholder. For fields that can legitimately have "blank" as a value, it makes it ambiguous whether or not the label is a value or not.
Is there some setting or class I can add to get the desired behavior?
Resources (screenshots, code snippets etc.) Snippet: https://mdbootstrap.com/snippets/standard/consys/3733398
Thanks!
A related issue with floating labels, they don't work properly with other input types like datetime-local. The label goes on top of the existing content in the field.
https://mdbootstrap.com/snippets/standard/consys/3733409
Michał Duszak staff commented 2 years ago
Thank you for feedback. I will discuss adding input fields support to datetime-local type with the frontend team.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 3.10.2
- Device: Desktop
- Browser: Firefox
- OS: Linux
- Provided sample code: No
- Provided link: Yes
Michał Duszak staff commented 2 years ago
Hello, we don't provide such an option to leave the label at the top - you would need to edit some source code, or add some custom styling - for example something like this: https://mdbootstrap.com/snippets/standard/m-duszak/3735739
consys priority commented 2 years ago
Thanks, I can't get to your example, it goes to a 404 page and says "Unauthorized" in a toast notification.
Michał Duszak staff commented 2 years ago
Hello, could you try again? I reuploaded the snippet.
consys priority commented 2 years ago
Works now. Thanks!