Bootstrap導航欄下拉菜單 - 出現在表單後面的geocomplete建議

使用引導菜單3我在導航欄下拉鍊接中放置了一個搜索表單，並試圖使用JQuery Geocomplete插件（http://ubilabs.github.io/geocomplete/）來填充地址表單輸入。然而，地址建議出現在窗體後面......有什麼方法可以用CSS來解決這個問題嗎？Bootstrap導航欄下拉菜單 - 出現在表單後面的geocomplete建議

Screenshot

在標題：

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

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>

，並在文檔的末尾我有：

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

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

來源

2013-08-31 Matt

能否請您發佈您的代碼？ – Jared

感謝您的閱讀。我用HTML和JavaScript代碼更新了我的問題。你是否也需要CSS？ – Matt

Google auto complete將結果包裝在類pac-container的容器中，該容器的z索引爲1000（由內聯css設置）。下拉菜單默認具有相同的z-index。爲了解決這個添加了更高的z-index到該.pac容器：

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

參考文獻：

來源

2013-09-01 14:02:37

神奇，謝謝 - 它完美的作品。 – Matt

Bootstrap導航欄下拉菜單 - 出現在表單後面的geocomplete建議

回答

相關問題