Changing position of Google Places Autocomplete result box

Question

On a page I'm working on, the results of the Google Places Autocomplete is showing up 70px below where it should, leaving a gap between the search box and the beginning of the results container.

The height of the gap happens to be the exact height of Chrome's autofill feature, so I'm suspicious that the Autocomplete library is for some reason taking that height into account when calculating the position, even though I've managed to disable that feature on my search box.

I'm able to fix the problem by overriding the value of the top attribute of the .pac-container class (replacing the value of 1234px which the API has calculated with 1164px), but I would rather have a way to do this dynamically or just based on an offset than have to hard-code that number.

Is there a way, with CSS or JavaScript/jQuery, to move the Autocomplete results container up by a certain amount?

A list of the CSS classes involved in the Autocomplete box can be found in Google's documentation.

Answer 1

I have tried many approaches and the best thing so far that worked for me is the good old (negative) margin.

I wanted the resulting menu to be shown on top and I did this:

<style type="text/css">
  .pac-container{
    margin-top: -210px;
  }
</style>

Answer 2

The below snippet worked for me. In this initially, it will remove the previous pac-container div anywhere in the DOM. Later on, It tries to find the pac-container div element inside autocomplete object and it will place pac-container the div element inside another div in this case it is "book-billing-address"

 $(".pac-container").remove();
 autocomplete = new google.maps.places.Autocomplete(input);
          if(id_val == 'payment-address'){
            setTimeout(function(){
              if(autocomplete.gm_accessors_ != undefined){
                var container_val = autocomplete.gm_accessors_.place.qe.gm_accessors_.input.qe.H
                autocomplete.gm_accessors_.place.qe.gm_accessors_.input.qe.H.remove();
                $('#book-billing-address').append(container_val);
              }
            }, 100);
          }

and applied the following CSS, when div element moved inside book-billing-address div.

#book-billing-address .pac-container{
  position: absolute !important;
  left: 0px !important;
  top: 36px !important;
}