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建议

回答

相关问题