Topic: Ambiguous form labels

consys priority asked 1 year ago

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:


Michał Duszak staff commented 1 year 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:

consys priority commented 1 year 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 1 year ago

Hello, could you try again? I reuploaded the snippet.

consys priority commented 1 year ago

Works now. Thanks!

consys priority answered 1 year ago

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.

Michał Duszak staff commented 1 year ago

Thank you for feedback. I will discuss adding input fields support to datetime-local type with the frontend team.

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

  • User: 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