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: chrome autofill overlapping labels

Dillonv free asked 6 years ago


previous ticket Has this been resolved, link is previous ticket... when logging in, chrome auto-fill overlaps labels  

mantul free answered 5 years ago


how to fix this issue for vuejs? thanks


Magdalena Dembna staff commented 5 years ago

Hi, Can you provide a screenshot so I could recreate your issue? Kind regards, Magdalena


mantul free commented 5 years ago

i open ticket to vue category thanks you


Piotr Glejzer staff answered 6 years ago


Hi, Here is a solution proposed by Rehman on that link Issue. Can you check this?
<div class="md-form">

<input type="email" id="materialLoginFormEmail" class="form-control" onfocus="onEnter(this)" onblur="onExit(this)">

<label for="materialLoginFormEmail">E-mail</label>

</div>
function onEnter(element) {
if ((element.value !==undefined&& element.value.length >=0) ||$(this).attr('placeholder') !==null) {
element.parentNode.querySelector("label").classList.add("active");
}
}

function onExit(element) {
if ((element.value !==undefined&& element.value.length ==0) ||$(this).attr('placeholder') ===null) {
element.parentNode.querySelector("label").classList.remove("active");
}
}


Best, Piotr

Ungr pro answered 6 years ago



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 jQuery
  • MDB Version: 4.5.10
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes