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.

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.

• javascript
• jquery
• css
• google-maps-api-3
• google-places-api

• It would be great if we get to see your code. – kaho Commented Jul 1, 2015 at 19:02

6 Answers 6

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>

Yes, you can style the Autocomplete https://google-developers.appspot.com/maps/documentation/javascript/places-autocomplete#style_autocomplete

However, lets look at WHY the "gap" is happening.

Double check your HTML and BODY tags, see if they have margin/padding added to them

So, the way Autocomplete detects it's position is by calculating the X/Y from the top/left of the BODY tag. I had this same problem (autocomplete had a big gap between the result box and the field), I discovered that my CMS system was adding a 30px margin to the BODY tag for the admin bar, this pushed the Autocomplete box down by 30 pixals... (the real problem)

html, body{margin:0 0 0 0;} 

and the autocomplete vertical position was proper and the gap was gone without any odd JS scripting...

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;
}

please check parent element of searchbox, if parent element has margin-top, then convert it into padding-top

example code `

.parent_element {
   /* margin-top: 70px; */
    padding-top: 70px;
}
</style>
<div class="parent_element">
    <input type="text" class="autocomplete">
</div>`

I hope will work for you :)

It's perfectly work for me , no issue with position bug when scroll

function initAutocomplete() {
      //....codes...
       //....add this code just before close function...
    setTimeout(function(){ 
                $(".pac-container").prependTo("#mapMoveHere");
            }, 300);

}

https://codepen.io/gmkhussain/pen/qPpryg

Add css on body tag with position: relative

It worked.