Ambiguous form labels

Topic: Ambiguous form labels

consys pro premium priority asked 3 years 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: https://mdbootstrap.com/snippets/standard/consys/3733398

Thanks!

Michał Duszak staff commented 3 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 pro premium priority commented 3 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 3 years ago

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

consys pro premium priority commented 3 years ago

Works now. Thanks!

Add comment

consys pro premium priority answered 3 years ago

0 0 Best answer

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 3 years ago

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

Add comment