title: Google Place Autocomplete API dropdown does not show in Modal
body: <p>I am new to working with bootstrap. I am trying to integrate Google JS Place Autocomplete API with bootstrap 3.0 Modal. </p>
  
  <p>Modal CSS:</p>
  
  <pre><code>#searchModal{
      z-index:1041 !important;
  }
  .modal-header, h4, .close {
      background-color: #5cb85c;
      color: white !important;
      text-align: center;
      /*font-size: 30px;*/
  }
  .modal-footer {
      background-color: #f9f9f9;
  } 
  .modal-backdrop {
      opacity: 0.5 !important; 
  }
  </code></pre>
  
  <p>Autocomplete JS:</p>
  
  <pre><code>function initMap() {
  var oInput = document.getElementById('ocity-input');
  
  var oSearchBox = new google.maps.places.SearchBox(oInput);
  
  oSearchBox.addListener('places_changed', function() {
      var places = oSearchBox.getPlaces();
  
      places.forEach(function(place) {
          console.log(place.name);
          console.log(place.place_id);
      });
  });
  }`
  </code></pre>
  
  <p>Autocomplete CSS:</p>
  
  <pre><code>@CHARSET "ISO-8859-1";
  html, body {
      height: 100%;margin: 0;padding: 0;
  }
  .form-control {
      margin-top: 10px;
      border: 1px solid transparent;
      border-radius: 2px 0 0 2px;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      height: 32px;
      outline: none;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  }
  #ocity-input {
      background-color: #fff;
      font-family: Roboto;
      font-size: 15px;
      font-weight: 300;
      margin-left: 12px;
      padding: 0 11px 0 13px;
      text-overflow: ellipsis;
      width: 300px;
  }
  #ocity-input:focus {
      border-color: #4d90fe;
  }
  .ocity-container {
      font-family: Roboto;
      z-index: 10000;
      display: block !important;
  }
  </code></pre>
  
  <p>Modal Code:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="modal fade" id="searchModal" role="dialog"&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header" style="padding: 35px 50px;"&gt;
                      &lt;h4 style="text-align: center;"&gt;
                          &lt;span class="logo"&gt;Name&lt;/span&gt;
                      &lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body" style="padding: 40px 50px;"&gt;
                      &lt;form role="form"&gt;
                          &lt;div class="form-group"&gt;
                              &lt;input id="ocity-input" class="form-control" type="text" placeholder="Origin"&gt;
                          &lt;/div&gt;
                          &lt;button type="submit" class="btn btn-success btn-block"&gt;
                              &lt;span class="fa fa-undo"&gt;&lt;/span&gt; Lets Go
                          &lt;/button&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>I have tried multiple z-index help answers both on stackoverflow and the internet but they don't seem to work for me.</p>