Label overlapping on autocompletion of email input field

Topic: Label overlapping on autocompletion of email input field

ravinder.sharma@inhabit.com priority asked 1 year ago

![enter code here][1]

Label of input field is overlapping with the autocompleted value.

Please look into this.

If any other information needed , then let me know.

Thanks Ravinder sharma

ravinder.sharma@inhabit.com priority commented 1 year ago

https://usercontent.mdbootstrap.com/mdb-images/support/8036a018-ad49-4ec3-91ab-3bd16cd99aee-label_overlapping.jpg

Mateusz Lazaru staff commented 1 year ago

Does it occur when the user chooses a value from the browser's suggested options, or when the browser automatically fills inputs on page load?

How to reproduce the problem locally? Could you provide the code snippet?

ravinder.sharma@inhabit.com priority commented 1 year ago

Hey, this is occurring when the browser automatically filling input on page load.

Add comment

ravinder.sharma@inhabit.com priority answered 1 year ago

0 0 Best answer

  <FieldWrapper>
    <InputField
      id="username"
      name="username"
      type="text"
      value={formData.username}
      label="Email or Username"
      onChange={handleInputChange} />
    {validator.message('username', formData.username, 'usernameRequired')}
  </FieldWrapper>

Mateusz Lazaru staff commented 1 year ago

Thank you, I've got it. Added a task to fix it.

ravinder.sharma@inhabit.com priority commented 1 year ago

Any Estimated time to fix this issue ?

Mateusz Lazaru staff commented 1 year ago

I hope we can make it in December, but I can't promise that.

ravinder.sharma@inhabit.com priority commented 11 months ago

ANy update on above

Mateusz Lazaru staff commented 11 months ago

Yes. It's related to default chrome behavior. When the browser adds autocomplete value, it does not trigger any event like onChange, onInput etc.

That's why, it's hard to detect autocomplete. We have one solution in testing phase, and it's very possible it will be released in a few weeks.

Until that, I've prepared a CSS workaround for you:

:-webkit-autofill ~ .form-label,
:autofill ~ .form-label {
  transform: translateY(-1rem) translateY(0.1rem) scale(0.8);
}

:-webkit-autofill ~ .form-notch .form-notch-middle,
:autofill ~ .form-notch .form-notch-middle {
  border-right: none;
  border-left: none;
  border-top: 1px solid transparent !important;
}

/* Only needed if you use large input */
.form-control-lg:-webkit-autofill ~ .form-label,
.form-control-lg:autofill ~ .form-label {
  transform: translateY(-1.25rem) translateY(0.1rem) scale(0.8);
}

/* Only needed if you use small input */
.form-control-sm:-webkit-autofill ~ .form-label,
.form-control-sm:autofill ~ .form-label {
  transform: translateY(-0.85rem) translateY(0.1rem) scale(0.8);
}

Yes. It's related to default chrome behavior. When the browser adds autocomplete value, it does not trigger any event like <code>onChange</code>, <code>onInput</code> etc.

That's why, it's hard to detect autocomplete. We have one solution in testing phase, and it's very possible it will be released in a few weeks.

Until that, I've prepared a CSS workaround for you:

<pre class="prettyprint"><code>:-webkit-autofill ~ .form-label,
:autofill ~ .form-label {
 transform: translateY(-1rem) translateY(0.1rem) scale(0.8);
}

:-webkit-autofill ~ .form-notch .form-notch-middle,
:autofill ~ .form-notch .form-notch-middle {
  border-right: none;
  border-left: none;
  border-top: 1px solid transparent !important;
}

/* Only needed if you use large input */
.form-control-lg:-webkit-autofill ~ .form-label,
.form-control-lg:autofill ~ .form-label {
  transform: translateY(-1.25rem) translateY(0.1rem) scale(0.8);
}

/* Only needed if you use small input */
.form-control-sm:-webkit-autofill ~ .form-label,
.form-control-sm:autofill ~ .form-label {
 transform: translateY(-0.85rem) translateY(0.1rem) scale(0.8);
}
</code></pre>

Please insert min. 15 characters.

Add comment

Write

Create snippet

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: Priority
Premium support: Yes
Technology: MDB React
MDB Version: MDB5 7.0.0
Device: Desktop
Browser: Chrome 119.0.6045.160
OS: All
Provided sample code: No
Provided link: No

ravinder.sharma@inhabit.com

0Support score
2Questions 2Answers 0Snippets