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

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