title: Bootstrap Navbar overlapping Google places autocomplete dropdown
body: <p>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). </p>
  
  <p><a href="https://i.stack.imgur.com/1uxWQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1uxWQ.png" alt="enter image description here"></a></p>
  
  <p>I have tried to change the <code>z-index</code> of the input box to 10 or 2000 or 90000 but it does not seem to have an effect. </p>
  
  <p>Is there something else that needs to be done that I am missing?</p>
  
  <p>Here is the html:</p>
  
  <pre><code>&lt;form class="navbar-form" role="search"&gt;
    &lt;div class="col-sm-2"&gt;
      &lt;div class="form-group has-feedback no-margin"&gt;
        &lt;input aria-label="Place" type="text" class="form-control text-center" id="searchPlace" placeholder="Place" style="z-index:90000"&gt;
        &lt;i class="map-pin-icon form-control-feedback"&gt;&lt;/i&gt;
      &lt;/div&gt;      
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>