I am facing an issue where the autocomplete dropdown (div with class "pac-container") is consistently 4 pixels shy of aligning perfectly with the right side of the input field. It looks like this:
https://i.sstatic.net/Y0oq1.png
Below is the HTML code:
<input id="autocomplete" size="50" placeholder="Enter your address" type="text"></input>
and accompanying JavaScript:
function initialize() {
var options = {componentRestrictions: {country: 'uk'}, types: ['geocode']}
new google.maps.places.Autocomplete((document.getElementById('autocomplete')), options);
}
initialize();
You can find a JSFiddle snippet here: http://jsfiddle.net/GVdK6/524/
The Google Maps API auto-calculates the width for the dropdown and sets it using inline style. My goal is to have this width match that of the input field and be completely aligned. However, the input field's width varies based on the size attribute, so setting a fixed value for the pac-container in CSS using the !important rule has not resolved the issue. Any assistance on this matter would be greatly appreciated. Thank you!