Resolve the issue of autofill data overlapping with field labels

My form incorporates the Canada Post AddressComplete tool, which functions similarly to Google Maps Autocomplete. As you type your address, suggestions appear in a drop-down menu.

However, after selecting an address, the text in the Postal Code and City fields overlaps with the labels. Interestingly, when using Google Chrome's autofill feature, the data displays correctly in these fields.

For reference, I have included the code for Canada Post AddressComplete below, as well as the HTML for the affected fields.

You can access the form at . Simply choose any amount and proceed to the next page to view the problem fields.

Screenshot: https://i.sstatic.net/gNU2A.png

Despite attempting various solutions, such as utilizing JavaScript code found in similar inquiries, I have not been successful in resolving the issue of overlapping field labels during autofill on Chrome.

Canada Post AddressComplete:

<link rel="stylesheet" type="text/css" href="https://ws1.postescanada-canadapost.ca/css/addresscomplete-2.30.min.css?key=wt22-dj39-nm11-ua29" />

<script type="text/javascript" src="https://ws1.postescanada-canadapost.ca/js/addresscomplete-2.30.min.js?key=wt22-dj39-nm11-ua29"></script>

Postal Code Field HTML:

<div class="mdl-cell mdl-cell--6-col" id="zip_code_container" style="visibility: visible; position: relative;"><div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-invalid is-upgraded" data-upgraded=",MaterialTextfield"><input class="mdl-textfield__input" data-id="text" required="" maxlength="10" size="10" type="text" name="donation[zip_code]" id="donation_zip_code" autocomplete="off"><label class="mdl-textfield__label" for="donation_zip_code">Postal Code</label></div></div>

City Field HTML:

<div class="mdl-cell mdl-cell--6-col"><div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-invalid is-upgraded is-dirty" data-upgraded=",MaterialTextfield"><input class="mdl-textfield__input" data-id="text" required="required" type="text" name="donation[city]" id="donation_city"><label class="mdl-textfield__label" for="donation_city">City</label></div></div>

I am open to suggestions on how to fix this overlapping issue through JavaScript or CSS modifications, or potentially changing the field labels to help text displayed beneath the fields.

The current form supports help text, but only for additional questions and not existing fields.

javascriptcssformsautofill

Answer №1

Regrettably, the customization of dropdown styles is not feasible since it is an inherent browser component that is unrelated to DOM.

One possible workaround is to deactivate autofill in the HTML code by implementing the autocomplete="off" attribute:

<input type="text" id="foo" value="bar" autocomplete="off" />

Answer №2

Initially

Concealed Form Labels Using CSS:

label[for="donation_zip_code"] { display: none !important; }
label[for="donation_city"] { display: none !important; }

Subsequently

Inserted Placeholders Into Both Fields

The onload event ensures that the placeholder code is added after the form has completely loaded; otherwise, it may not work as intended and the placeholder might not appear.

If utilizing the field ID proves problematic or ineffective, resort to using the field name instead.

Make a substitution like getElementById('Your Field ID'). with getElementsByName('Your Field Name')[0].

In situations where the HTML code already features a placeholder, substitute it with:

document.getElementsByName('Your Field Name')[0].placeholder='Your Placeholder';

OR

document.getElementById("Your Field ID").placeholder='Your Placeholder';

function addLoadEvent(func) {  
      var oldonload = window.onload;  
      if (typeof window.onload != 'function') {  
        window.onload = func;  
      } else {  
        window.onload = function() {  
          if (oldonload) {  
            oldonload();  
          }  
          func();  
        }  
      }  
    }  

   addLoadEvent(function() {  
document.getElementById("donation_zip_code").setAttribute("placeholder", "Postal Code");

    });  

function addLoadEvent(func) {  
      var oldonload = window.onload;  
      if (typeof window.onload != 'function') {  
        window.onload = func;  
      } else {  
        window.onload = function() {  
          if (oldonload) {  
            oldonload();  
          }  
          func();  
        }  
      }  
    }  

   addLoadEvent(function() {  
document.getElementById("donation_city").setAttribute("placeholder", "City");

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for reducing image file size using ImageMinimizerWebpackPlugin in Next.js (webpack 5)

When attempting to use this plugin for image compression, I am encountering an issue where the build process completes successfully, but the images remain uncompressed. As a beginner with webpack, I'm unsure of what might be causing this problem. Cou ...

javascriptreactjswebpacknext.js

nodemon breaks down frequently while anticipating changes in files

After cloning a project that I finished 2 months ago, I am facing an issue where nodemon won't run. Despite trying to close npm using task manager on Windows and running it again, the error persists. I am also utilizing MongoDB as my database. If any ...

javascriptnode.jsjsonnpmnodemon

Using the ol tag in Google Chrome browser

I'm dealing with an issue regarding a simple ol list in a div: <div class="one">Title<hr width="200px"> <ol> <li>One</li> <li>Two</li> <li>Three</li> </ol> </div> Here's the CSS ...

htmlcssgoogle-chrome

Can the load API in jQuery be utilized to load fragments using a class selector instead of an id?

I've been working on enhancing a website's dashboard by incorporating more widgets onto the page. Interestingly, these widgets are already present on another page within the same domain. After some research, I discovered that utilizing the load A ...

javascriptjqueryhtmlajax

Navigating through Sails.Js: A Guide to Implementing Pagination

Looking to implement paginated tables in your application using sails.js, mongodb, and waterline-ORM? Wondering if there is a recommended method for pagination in sails.js? ...

javascriptnode.jssails.jswaterline

Is it feasible to determine the specific memory address of an Object in a program?

Is it possible in JavaScript to determine the memory location and memory usage of an object? Any assistance on this matter would be greatly appreciated. ...

javascript

CSS tilt effect in Internet Explorer versions 7 and 8

How can I make my rhombus styled menu work in IE 7 & 8? It's currently functioning fine in Chrome, Firefox, and IE9. Any suggestions or solutions would be greatly appreciated! http://jsfiddle.net/C7e7U/ Thank you in advance. Here is the HTML co ...

htmlinternet-explorercss

Removing Embedded Json Element from a Collection in AngularJS HTML

In my JSON Collection, I want to display the Email ID that is marked as IsPreffered = TRUE using AngularJS HTML without using JavaScript. This is my JSON Collection: { "user" : [ { "Name" : "B. Balamanigandan", "Email": [ ...

javascripthtmlangularjsjsonangular-filters

Error: Invalid Syntax Detected in React

I encountered an error that reads as follows: events.js:72 throw er; // Unhandled 'error' event ^ SyntaxError: /vagrant/resources/assets/js/react/react_app.js: Unexpected token (366:10) 364 | var InvestorsTable = React.cr ...

javascriptreactjsbabeljs

"Why does Sequelize migration successfully create a table, yet the models are unable to establish a connection to the

I am currently learning how to use the Sequelize ORM in Node.js and save data in a PostgreSQL database. My primary objective is to insert user data into the Users table. I have successfully created the table using migration; however, I am encountering dif ...

javascriptnode.jspostgresqlsequelize.jssequelize-cli

Incorporate a JavaScript script into an Angular 9 application

I have been experiencing issues trying to add a script.js file to angular.json and use it in one component. Adding a script tag directly to my HTML file is not the ideal solution. Can someone suggest an alternative approach or point out what I may be missi ...

javascriptangulartypescripttags

Having difficulty reaching a div element using either its id or class in a CSS stylesheet

I'm having trouble adding padding to the home section div and I can't seem to access it using either the id or class. Any suggestions on how to solve this issue would be greatly appreciated. Below is the CSS code: body { margin: 0 ; font ...

htmlcssbootstrap-4

Steps to access a Windows folder after clicking on a link within an HTML page using Asp.net

I attempted to use the following code : <a href="file:///C:\Programs\sort.mw">Link 1</a> <a href="file:///C:\Videos\lecture.mp4">Link 2</a> Unfortunately, this code does not work in Google Chrome or Firefox bro ...

htmlcssasp.net-mvc-4

"Adding dots" in a slideshow using HTML, CSS, and JS

I'm currently working on a slideshow that includes navigation dots at the bottom. Although the slideshow is functioning properly, I am encountering an issue where only one dot appears instead of the intended three in a row. Despite my research and att ...

javascripthtmlcssslideshow

Checking conditions sequentially in Angular

I have a unique use case that requires me to verify certain conditions. If one condition fails, I should not proceed to the next one. Instead, based on the failed condition, I need to display a dialog with a title and description explaining what went wrong ...

javascriptangulartypescriptrxjsobservable

I seem to be having an issue with the decimal point on my calculator - I only want to see one dot

Only need one dot for the calculator to function properly. The current situation with multiple dots is causing confusion. I intend to address other aspects of the code later, but I'm currently struggling with this issue. function dec(d) { let ...

javascripthtmlcss

Showing a hidden div after an unsuccessful AJAX call

Encountering an issue with displaying a div notification using the code snippet below: $.ajax({ url: url, cache: false, async: false, success: function (data) { response = jQuery.parseJSON(data); }, error: functi ...

jqueryhtmlcssajax

Tips for deleting multiple uploaded images from an array using Vue.Js and updating the UI accordingly

I am currently utilizing VueJs to upload multiple images. I am saving their respective base64 values in an Array to store them in the database. I have also added a remove feature, so when the user clicks on the remove button, it finds the index of that ele ...

javascriptvue.jsvuejs2

What is the most efficient way to load a PHP page once the webpage has completely finished loading?

I'm relatively inexperienced when it comes to PHP and JQuery, so please bear with me if my knowledge is limited. Currently, I'm facing an issue where loading a small HTML table that contains information queried from game servers (like shown in t ...

phpjqueryhtmlcssquerying

What is the best way to make grid-column-start and span work seamlessly together?

I'm having some trouble with creating a table using the grid function in CSS. Specifically, I am stuck on how to add dynamic categories at the top without hardcoding styles for each category count. I have tried using the grid-column-start property to ...

htmlcssgrid-layoutcss-grid