Google address autofill appears in wrong place on page

Question

I am using the Google address autofill API and when I start typing an address the address box appears higher on the page when it is meant to appear directly under the input box. Its position is ALSO affected by how far you are scrolled down on the page; the further you're scrolled down, the higher the box appears. This eliminates the possibility to hard code the boxes position as it is dynamically changing with the scroll.

Any ideas?

<input type="text" class="moving-input form-control" id="address" autocomplete="true" placeholder="">

    <script>
    // This example displays an address form, using the autocomplete feature
    // of the Google Places API to help users fill in the information.
    // This example requires the Places library. Include the libraries=places
    // parameter when you first load the API. For example:
    // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
    var placeSearch, autocomplete;
    var componentForm = {
      street_number: 'short_name',
      route: 'long_name',
      locality: 'long_name',
      administrative_area_level_1: 'short_name',
      //country: 'long_name',
      postal_code: 'short_name'
    };

    var typeToFieldMap = {
        administrative_area_level_1:"billing_state",
        locality:"billing_city",
        postal_code:"billing_zip",
        street_number: 'billing_street',
        route: 'billing_route'
    }

    function initAutocomplete() {
      // Create the autocomplete object, restricting the search to geographical
      // location types.
      autocomplete = new google.maps.places.Autocomplete(
          /** @type {!HTMLInputElement} */(document.getElementById('address')),
          {types: ['address']});
      // When the user selects an address from the dropdown, populate the address
      // fields in the form.
      autocomplete.addListener('place_changed', fillInAddress);
    }
    function fillInAddress() {
        // Get the place details from the autocomplete object.
        var place = autocomplete.getPlace();

        // Get each component of the address from the place details
        // and fill the corresponding field on the form.
        for (var i = 0; i < place.address_components.length; i++) {
          var addressType = place.address_components[i].types[0];
          if (componentForm[addressType]) {
            var val = place.address_components[i][componentForm[addressType]];
            var el = document.getElementById(typeToFieldMap[addressType]);
            if (addressType == "route")
                el.value = el.value + " " + val;
            //else if (addressType == "administrative_area_level_1")
            //  selectItemByValue(el, val);
            else
                el.value = val;
            console.log(val);
          }
        }

        $('.moving-input').each(
        function(){
            var input_wrap = $(this).closest('.moving-input');
            var val = $(this).val().trim();
            if (val.length){
               input_wrap.addClass('filled'); 
            }
        });     
    }

    function selectItemByValue(elmnt, value){
        for(var i=0; i < elmnt.options.length; i++)
        {
            //var sname = getStateName(value);
          if(elmnt.options[i].value == value)
            elmnt.selectedIndex = i;
        }

     }
    // Bias the autocomplete object to the user's geographical location,
    // as supplied by the browser's 'navigator.geolocation' object.
    function geolocate() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
          var geolocation = {
            lat: position.coords.latitude,
            lng: position.coords.longitude
          };
          var circle = new google.maps.Circle({
            center: geolocation,
            radius: position.coords.accuracy
          });
          autocomplete.setBounds(circle.getBounds());
        });
      }
    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC-3Akj68Di27JBiFK2xkV6YLFdUMIWDGE&libraries=places&callback=initAutocomplete" async defer></script>

Answer 1

The html was set to 100%. Removing this corrected the placement of the Google address drop down.