CODEWITHSUNDEEP
cssangularjsgoogle-mapsionic-frameworkautocomplete
RobinFrcd
RobinFrcd

Reputation: 5506

Google maps autocomplete, fix to the input

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:

Position bug when scroll

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

Upvotes: 16

Views: 14424

Answers (8)

Dacili
Dacili

Reputation: 387

I tried a lot of things, and none of them worked. I had a lot of components and parent-child hierarchy.

In the end, I decided to forbid scrolling if the dropdown options are shown (some libraries handle it the same way => forbid scrolling).

Angular, .ts file:

 getPlaceAutocomplete() {
   const autocomplete = new google.maps.places.Autocomplete(this.googleInput.nativeElement);
   google.maps.event.addListener(autocomplete, 'place_changed', () => {
     this.handleAddressChange(autocomplete.getPlace());
     this.enableScroll();
   });

   this.googleInput.nativeElement.addEventListener('blur', () => {
     this.enableScroll();
   });

   this.googleInput.nativeElement.addEventListener('focus', () => {
     this.disableScroll();
   });
 }

 enableScroll() {
 // I grabed my component by tag, you can grab it by id if needed
   (document.getElementsByTagName('sw-setup-wizard')[0] as HTMLElement).style.overflow = 'auto';
 }

 disableScroll() {
   (document.getElementsByTagName('sw-setup-wizard')[0] as HTMLElement).style.overflow = 'hidden';
 }

Upvotes: 0

Dacili
Dacili

Reputation: 387

I had so many components nested in the Angular app and tried a lot of solutions but nothing worked. What worked for me is in the main styles.sccs I added this:

body {
  position: relative;
}

or you could add to inline CSS in index.html: enter image description here

Upvotes: 1

Nicolás Pennesi
Nicolás Pennesi

Reputation: 116

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.

Upvotes: 10

Mana S
Mana S

Reputation: 519

In my case, I had to set the css as html,body{overflow-x:visible;} to make the pac-container fixed to the input field.

Upvotes: 2

Henry
Henry

Reputation: 641

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

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

Upvotes: 0

GMKHussain
GMKHussain

Reputation: 4719

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

Upvotes: 2

xxx
xxx

Reputation: 184

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.

Upvotes: 6

Lucas Lazaro
Lucas Lazaro

Reputation: 1526

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

Upvotes: 0

Related Questions