Topic: Weird behaviour with input labels on all browsers - Angular

MPL premium asked 2 months ago


I have made a simple registration from for my website: I am currently having an issue with this.

On the email input, when I type in a email address the label move to the top of the input box, as expected, but when I click off the email field then the label moves back over the inputted email, as in the image. I am wondering if anyone can help fix this.

Example

Here is a replication of the problem on github using the non pro version: https://github.com/akshayp1994/testexample


Arkadiusz Idzikowski staff answered 2 months ago


This is the correct syntax for the input fields in MDB Angular 5:

<mdb-form-control>
  <input mdbInput type="text" id="form1" class="form-control" />
  <label mdbLabel class="form-label" for="form1">Example label</label>
</mdb-form-control>

You can find more information in our documentation: https://mdbootstrap.com/docs/angular/forms/input-fields/

There is also a problem where the input directive cannot detect value changes made by browser autocomplete. We are currently working on a fix, but for now, we recommend turning that feature off on every input.



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

  • User: Premium
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 2.3.0
  • Device: Laptop
  • Browser: All
  • OS: Linux
  • Provided sample code: No
  • Provided link: Yes