Google maps autocomplete, fix to the input
I have the same problem. My solution was:
$('#inputContainer').scroll(function(){ //Set new top to autocomplete dropdown newTop = $('#autocompleteInput').offset().top + $('#autocompleteInput').outerHeight(); $('.pac-container').css('top', newTop + 'px'); }});
This update the dropdown position when container scrolls.
I just encountered the same problem when I was implementing the Autocomplete on a form inside a scrollable modal. If you only have one Autocomplete object then the solution is relatively easy.
- First make sure that your element's parent has a relative position.
Then you need to select the .pac-container and append it to the parent.
$("#autocomplete").parent() .css({position: "relative"}) .append(".pac-container");
Finally set the .pac-container left and top position to be below your element. This needs to be done in a stylesheet with the !important declaration to ensure it overrides the inline styles set by Google's code.
// these values will need to be calculated based on your layout.pac-container { top: 40px !important; left: 0px !important;}
This obviously wont work if you have multiple Autocomplete objects on a single page. Luckily I figured out a way to handle that scenario and recently published it in a jQuery plugin designed to make autocompleting address forms a breeze.
I got the solution check the example no issue with position bug when scroll
function initAutocomplete() { //....codes... //....add this code just before close function... setTimeout(function(){ $(".pac-container").prependTo("#mapMoveHere"); }, 300);}