2

Has anyone successfully got google.maps.places.Autocomplete working with a modal in Jhipster 4.6.1 / angular 4.2 ?

The problem is with the display of results (i verified the google lookup ajax request returns correctly), but the z-index of the .modal overrides the z-index of the google css for displaying the results => nothing appears.

This question has also been covered here: how to create google autocomplete in bootstrap modal in angular 2+?

and here: Google Place Autocomplete not showing in Bootstrap modal

..and I tried adding 

.pac-container {
    z-index: 1054 !important;
 }

to the component scss, but it has no effect.

I can fix it manually via the console in chrome and see that it works.

This example below, show's a working example with angular2 + ngxbootstrap + modal:
https://embed.plnkr.co/N2Oiu5JzirOfUuA8Te3o/

...but I cannot (for the life of me) seem to override the .pac-container z-index when the google lookup is done. Any advice to get me out of the "house of pain" is much appreciated :-)

pkozlowski.opensource
  • 117,202
  • 60
  • 326
  • 286
reboot_required
  • 58
  • 6

2 Answers2

2

Try adding the .pac-container style to the root level styles, e.g. styles.scss.

If you look at the source, you will notice that the .pac-container element gets slapped at the bottom of the html. I'm guessing it escapes the modular styling of an angular component. This isn't really surprising, as working with angular and google maps together often requires working the ngZone, since the google map calls happen outside of the angular zone.

Anyways, not necessarily an ideal solution, but I haven't run across anything better.

Waggles
  • 304
  • 2
  • 8
  • Thanks for the insight here, yep that "workaround" did the trick. – reboot_required Dec 06 '18 at 12:58
  • Angular 8 / Bootstrap 5 - Just spent an hour playing with the container at the component level trying to pull it in front of the modal. This finally did the trick. Thanks. – Doug Nov 10 '19 at 01:00
-1

Add the style element in the dialog.component.html file, then add the class to the input field as shown below.

 <div class="form-group">
            <input  placeholder="search for location" autocorrect="off" autocapitalize="off" spellcheck="off" type="text" class="form-control pac-container"  #search  >
        </div>
Monjur Morshed
  • 84
  • 3
  • 9