title: JavaScript/SASS: How to override default width of Google Maps API v3 Autocomplete dropdown based on width of input field?
body: <p>I have an issue where the autocomplete dropdown (div with class "pac-container") is always 4 pixels short of being aligned with the right side of the input field. Like below:</p>
  
  <p><a href="https://i.stack.imgur.com/Y0oq1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y0oq1.png" alt="Google Maps API v3 Autocomplete"></a></p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;input id="autocomplete" size="50" placeholder="Enter your address" type="text"&gt;&lt;/input&gt;
  </code></pre>
  
  <p>and JavaScript:</p>
  
  <pre><code>function initialize() {
    var options = {componentRestrictions: {country: 'uk'}, types: ['geocode']}
    new google.maps.places.Autocomplete((document.getElementById('autocomplete')), options);
  }
  
  initialize();
  </code></pre>
  
  <p>Here is the JSFiddle snippet: <a href="http://jsfiddle.net/GVdK6/524/" rel="nofollow noreferrer">http://jsfiddle.net/GVdK6/524/</a></p>
  
  <p>Google Maps API automatically calculates this width and applies it to the dropdown via inline style. I would like it to be the same width and aligned with the input field. The width of the input field can vary depending on the size attribute, so setting the width of the pac-container to a fixed value in CSS with the !important rule does not work. Any help would be appreciated, thanks!</p>