Google Maps Autocomplete Result in Bootstrap Modal Dialog

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! :)

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

did it for me

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

The problem is with the z-index of the .modal

Use this CSS markup:

.pac-container {
    background-color: #FFF;
    z-index: 20;
    position: fixed;
    display: inline-block;
    float: left;
}
.modal{
    z-index: 20;   
}
.modal-backdrop{
    z-index: 10;        
}​

Also you can check the final demo here

ps: thanks to @lilina for that demo on jsfiddle.com