Topic: floating labels not suitable for edit forms?

Perryn Fowler free asked 3 months ago


Expected behavior

I am attempting to implement an 'edit' form where the form fields are not empty when the user loads the page.

I expected that the floating labels would start in the 'floated' position and not animate into that position on page load.

Actual behavior

Each time the user loads the form all the labels animate up into the 'floated' position, which looks strange.

Resources (screenshots, code snippets etc.)

I have implemented the inputs as per examples:

 <div class="form-outline" data-mdb-input-init>
      <input type="text" class="form-control" id="name" value="Mark" />
      <label for="name" class="form-label">Name</label>
</div>

You can see the behaviour I am talking about in this example from the documentation

https://mdbootstrap.com/docs/standard/forms/validation

In the 'Basic Example' the 'First Name' and 'Last Name' fields are populated as for an edit form. Every time you refresh the page their labels animate into position.

Is there any way to avoid this, or should I avoid floating labels for edit forms? :(


Kamila Pieńkowska staff answered 3 months ago


Position of the label is changed with JS. Even if input have value from the beginning component initiation is performed on the page load. In theory you can change transition time but it will look more jumpy then.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 7.3.2
  • Device: macbook pro
  • Browser: Chrome, Safari, Firefox
  • OS: OSX
  • Provided sample code: No
  • Provided link: Yes