Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


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

Daniel Andreoli free 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


nevda pro answered 6 years ago


Maybe there is a fix?

Bartłomiej Malanowski staff commented 6 years ago

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


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

rentrent pro commented 6 years ago

Thanks

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


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: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags