input labels overlap input value on page load

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: input labels overlap input value on page load

rentrent pro asked 6 years ago

Hi, When page loads, when browser autofills form, labels won't slide up as supposed to. They stay on the of input, they slide up when I click on input. This problem does not occur when input value is set at backend side, it occurs when browser autofills form

BMarkus pro answered 6 years ago

Hi rentrent, I've found a workaround, just set the value-attribute to " " at first. Then you now fill the input, you don't have this "bug". For example: 
<input type="text" class="form-control validate" value=" ">
This isn't the best practise, but it works ;) Kind regards, Markus

rentrent pro commented 6 years ago

:), thanks, but this solution might cause errors in validation

Bartłomiej Malanowski staff pro premium answered 6 years ago

This bug is already on our TODO list, so this will be fixed in the future

rentrent pro commented 6 years ago

Thanks

nevda pro answered 6 years ago

Maybe there is a fix?

Bartłomiej Malanowski staff pro premium commented 6 years ago

We still don't have a fix for that - issue is still in our TODO list

Daniel Andreoli answered 3 years ago

Is there a fix for this already?

Marcin Luczak staff commented 3 years ago

Hi,

This is an issue with some browsers try to autofill your commonly used inputs on page load without triggering any event . If you are aware that some of your inputs are broken due to the autocomplete of the browser you could try to manually trigger('change') on them after the page loads od add active class, which should change the label position if the input value is not empty.

Keep coding,

Marcin
Write
Create snippet
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: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
rentrent
Pro User
15Support score
5Questions 1Answers
0Snippets likes 1Snippets