In ionic 3 Ionic - Autocomplete location of Google places is detached from input box when we scroll down

in ionic we are using ionic geolocation for google maps…In input of search box when we search any place and then after scrooll down to app then autocomplete also scroll and detached from input search box design. I applied many css for attaching autocomplete with search input but not working properly.google-search-autocomplete

Solution

  1. Do not use ion-searchbar or ion-input. (use html input)
  2. When someone scroll just close the autocomplete

i done this but not working in android and ios buid only working in web browser.

html file

<ion-content class="bglightgray" #content padding>
    <div class="mapView">
        <div class="searchBar">
            <!-- <ion-searchbar placeholder="Search your Location" class="mapSearch" ></ion-searchbar> -->
            <div class="inp-wrap">

                <input id="MapInput" [(ngModel)]="mapname" class="mapSearch cs-mapSearch" type="text" placeholder="Search your Location" #MapInput>

                <div class="closeIcon" (click)="closeSearch()"></div>
                <div class="searchbarIcon"></div>
            </div>

        </div>
        <!-- <img src="assets/imgs/map.jpg" alt=""> -->
        <div #mapContainer id="mapContainer" [ngClass]=" { hideMap: !MapView}"></div>
	</div>
</ion-content>

ts file

import { Content, Events } from 'ionic-angular';
export class MapViewPage {
@ViewChild('content') content: Content;
constructor(){
}

	ngAfterViewInit() {
    this.content.ionScroll.subscribe((event) =>  {
      //console.log('scrolled');
        //var pacContainer = document.body.querySelector('.pac-container');
        const pacContainer = document.querySelector<HTMLElement>('.pac-container');
        pacContainer.style.display  = "none";
       });
  }
 }

Can you create minimal repo to reproduce.

another option would be to create own list UI and only get location address list from google map auto complete