Geek Answers Handbook

Change the position of the auto-complete results window in Google Places

On the page I'm working on, Google Places auto-complete results are displayed 70 pixels lower where needed, leaving a space between the search field and the beginning of the results container.

The gap height is the exact height of the Chrome autofill function, so I suspect that the Autocomplete library for some reason takes this height into account when calculating the position, although I managed to disable this function in the search window.

I can fix the problem by overriding the value of the topclass attribute .pac-container(replacing the value 1234pxthat the API calculated using 1164px), but I would prefer there is a way to do this dynamically or simply based on the offset than with the hard code of this number.

Is there a way with CSS or JavaScript / jQuery to move the container of autofill results by a certain amount?

A list of CSS classes involved in the Autocomplete field can be found in the Google documentation .

+4
source share
3 answers

I tried many approaches, and the best that has worked for me so far is the good old (negative) supply.

I need the menu that appears to be displayed on top, and I did this:

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

check the parent element of the search query if the parent element has margin-top and then convert it to padding-top

code example `  

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

I hope that works for you :)

0
source

,

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

}

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

0

More articles:


All Articles