Google Maps Autocomplete Result in Bootstrap Modal Dialog

Question

I have a Google Maps Autocomplete input field inside a Twitter Bootstrap modal dialog and the autocomplete result is not displayed. However, if I press the down arrow key, i

Answer 1

Bootstrap's .modal z-index is by default 1050.

jQuery UI's .ui-autocomplete z-index is by default 3.

So put this on the CSS:

/* Fix Bootstrap .modal compatibility with jQuery UI Autocomplete,
see http://stackoverflow.com/questions/10957781/google-maps-autocomplete-result-in-bootstrap-modal-dialog */
.ui-autocomplete {
    z-index: 1051 !important;
}

Works wonders! :)

Answer 2

In general, you can just bump up the .pac-container z-index to anything above 1050 and you won't need the other CSS overrides.

I discovered that this problem also exists for jQuery UI dialogs. So in case it ends up being helpful to anyone else, here's a quick reference for where the Bootstrap/jQuery UI modals live in the z-plane:

jQuery UI Dialog - z-index: 1001
Bootstrap Modal - z-index: 1050

Answer 3

In my scenario the .pac-container 's z-index value will be init and override to 1000, even I set in CSS. (possibly by google API?)

my dirty fix

$('#myModal').on('shown', function() {
     $(".pac-container").css("z-index", $("#myModal").css("z-index"));
}

Answer 4

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

did it for me

https://github.com/twbs/bootstrap/issues/4160

Answer 5

I have spend 2,3 hours to just digging out the error with google places API drop down z index. Finally I have found this. Just paste this code at top of your JS script and update the input id name.

var pacContainerInitialized = false;
$("#inputField").keypress(function() {
  if (!pacContainerInitialized) {
    $(".pac-container").css("z-index", "9999");
    pacContainerInitialized = true;
  }
});

Full reference link. https://groups.google.com/forum/#!topic/google-maps-js-api-v3/GZX0ynQNn1M Thanks to Gautam.

Answer 6

If you are using Visual Studio, on your style.css page set the z-index for .modal to 20.

e.g

.modal {
    z-index: 20 !important;
}