Trình đơn thả xuống thanh điều hướng Bootstrap - đề xuất địa lý xuất hiện phía sau biểu mẫu

Question

Sử dụng bootstrap 3 Tôi đã đặt biểu mẫu tìm kiếm bên trong liên kết thả xuống thanh điều hướng và tôi đang cố gắng sử dụng plugin JQuery Geocomplete (http://ubilabs.github.io/geocomplete/) để điền vào biểu mẫu địa chỉ. Tuy nhiên, các gợi ý địa chỉ đang xuất hiện phía sau biểu mẫu ... có cách nào để sửa lỗi này với CSS không?

Screenshot

Trong tiêu đề:

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script> 

mã HTML:

<header class="navbar navbar-green navbar-fixed-top navbar-green" role="banner"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> <span class="sr-only">Toggle navigation</span> 
<span class="icon-bar"></span> 

       <span 
       class="icon-bar"></span> <span class="icon-bar"></span> 

      </button> <a href="index.php" class="navbar-brand">Brand</a> 

     </div> 
     <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation"> 
      <ul class="nav navbar-nav"> 
       <li><a href="#"><i class="icon-map-marker"></i> Browse</a> 
       </li> 
      </ul> 
      <ul class="nav navbar-nav"> 
       <li class="dropdown active"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-search"></i> Find <b class="caret"></b></a> 

        <ul 
        class="dropdown-menu search"> 
         <form class="navbar-form navbar-left" role="search"> 
          <div class="form-group"> 
           <button type="button" class="btn btn-default navbar-btn" data-toggle="tooltip" 
           data-placement="right" title="Use your exact location"> 
            <li class="icon-screenshot"></li> 
           </button> 
          </div> 
          <div class="form-group"> 
           <input type="text" class="form-control" placeholder="Address" name="address" 
           id="address"> 
          </div> 
          <div class="form-group"> 
           <select class="form-control"> 
            <option>1</option> 
            <option>2</option> 
            <option>3</option> 
            <option>4</option> 
           </select> 
          </div> 
          <div class="form-group"> 
           <button type="submit" class="btn btn-green">Search</button> 
          </div> 
         </form> 
      </ul> 
      </li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
       <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-user"></i> USER<b class="caret"></b></a> 

        <ul 
        class="dropdown-menu"> 
         <li><a href="#"><i class="icon-pencil"></i> Profile</a> 
         </li> 
         <li><a href="#"><i class="icon-upload"></i> Submit</a> 
         </li> 
         <li class="divider"></li> 
         <li><a href="#"><i class="icon-signout"></i> Log out</a> 
         </li> 
      </ul> 
      </li> 
      </ul> 
     </nav> 
    </div> 
</header> 

Và ở phần cuối của tài liệu tôi có:

<script src="assets/js/jquery.geocomplete.js"></script> 

<script> 
    $(function() { 
     $("#address").geocomplete({ 
      componentRestrictions: { 
       country: 'GB' 
      } 
     }) 
    }); 
</script> 

Answer 1

Tính năng tự động hoàn thành của Google kết thúc tốt đẹp các kết quả trong vùng chứa với lớp pac-container vùng chứa này có chỉ mục z là 1000 (được đặt bởi css nội tuyến). Menu thả xuống có cùng chỉ mục z theo mặc định. Để giải quyết việc này thêm một z-index cao hơn để các pac-container:

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

Tài liệu tham khảo:

• http://benkammerling.wordpress.com/2012/02/17/google-maps-places-autocomplete-styling-in-css/
• How do you style the dropdown on Google Places Autocomplete API?