css - 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 things like changing the position of .pac-container but it doesn't solve the problem. When I inspect the page, it seems that the results container loads at the end of the page, so it's not easy to make the block stick to the input bar.

I already searched everywhere and didn't fidn any suitable solution ? Does someone have an idea how to do it ? (It's actually just a simple code like this:

    function initialize() {
            var options = {componentRestrictions: {country: 'uk'}, types: ['geocode']}
        new google.maps.places.Autocomplete(
        (document.getElementById('autocomplete')), options);
    }
    
    initialize();

jsfiddle

Thanks

Answer 1

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.