Google maps autocomplete, fix to the input

Question

I\'m trying to add a google maps autocomplete input to my ionic app. It works pretty well except when I scroll. As shown on the image:

So I tried different th

Answer 1

I was now able to reproduce the problem, the solution is simply adding position: relative to your wrapper box and position: absolute to your #autocomplete input.

I got the solution checking the example provided by the Google team.

I've updated your fiddle to match the solution, but it goes like this:

Your updated CSS:

.box {
  position: relative;
  height: 200vh;
}

#autocomplete {
    width:350px;
    position: absolute;
}

Answer 2

Since my input field is inside "ion-content", I implemented Nicolas Pennesi 's answer with ion-content's method:

onScroll($event) {
// his code here
}

Answer 3

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

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

Answer 4

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.

Answer 5

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.

1. First make sure that your element's parent has a relative position.

2. Then you need to select the .pac-container and append it to the parent.

   $("#autocomplete").parent()
       .css({position: "relative"})
       .append(".pac-container");
   

3. 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.