Put google places pac-container inside div?

Question

I am using the google places autocomplete api and when I initialize the auto complete element autocomplete = new google.maps.places.Autocomplete($('#google_places_ac')[0], {}) it appends the .pac-container to the body.

I have a div that is scrollable that this content is in so what happens is the .pac-container is positioned absolute and when the div scrolls it does not scroll with it.

Is there any way I can get the .pac-container to be inserted inside of my div and not at the end of the body?

Answer 1

It's not a perfect solution but it the best I could find

var addressInputElement = $('#yourInputElementId');
addressInputElement.on('focus', function () {
  var pacContainer = $('.pac-container');
  $(addressInputElement.parent()).append(pacContainer);
})

you might be needed to change some css as well

.pac-container {  
  z-index: 9999999 !important;  
  top: 32px !important;   //your input height
  left: 0 !important; 
}