Bootstrap Navbar overlapping Google places autocomplete dropdown

Question

I have a Navbar on which I am trying to add a places search box. Everything almost works except that a small part of the google places hint box is being overlapped by the navbar (as shown in the image below).

I have tried to change the z-index of the input box to 10 or 2000 or 90000 but it does not seem to have an effect.

Is there something else that needs to be done that I am missing?

Here is the html:

<form class="navbar-form" role="search">
  <div class="col-sm-2">
    <div class="form-group has-feedback no-margin">
      <input aria-label="Place" type="text" class="form-control text-center" id="searchPlace" placeholder="Place" style="z-index:90000">
      <i class="map-pin-icon form-control-feedback"></i>
    </div>      
  </div>
</form>

Answer 1

Change the autocomplete z-index or move the pac-container down.

Bootstrap's navbars z-index is 1000, navbar-fixed-top is 1030.

The Autocomplete z-index is also 1000 so you'll have to increase it.

Answer 2

https://google-developers.appspot.com/maps/documentation/javascript/places-autocomplete#style_autocomplete

is a great resource that let you change autocomplete elements styles in css

Answer 3

make the google class pac-container with z-index greater than the navbar.

.pac-container{
 z-index: 8000;
}