Question

目前，我正在开发一个自定义AngularJS下拉列表，该下拉列表由以下HTML结构表示：

<div>
  <label></label>
  <div>
    <a ng-class="{active: popover}">
      <div></div> <!-- the selected item -->
    </a>
    <div style="position: relative;">  <!-- THIS is the div that presents -->
                                       <!-- the list with the menu items-->
      <div class="popover" ng-class="{popover-show}">
        <input /> <--! this is a search box -->
        <ul ng-repeat="item in items">
        </ul>
      </div>
    </div>
  </div>
</div>

.popover和.popover-show的规则来自Twitter Bootstrap，但有以下附加规则：

.popover{
  top: 20px;
  left: auto;
  right: 0;
  max-width: none;
  border-collapse: separate;
}
.popover.popover-show {
    display : block !important;
}

postition:relative的div是包装的div 该指令似乎工作正常。但是，当它位于页面中间的下方且项目太多时，默认情况下会超出窗口的高度，会出现条形的垂直滚动。我一直在寻找其他类似的问题，但没有一个问题与我的情况相近。所以，我的问题是什么是最聪明的方法来检测我什么时候超过窗口高度（当然，最好的地方 - CSS，指令）并将底部设置为0？

提前致谢！

更新：我试图绕过而不使用jQuery和Twitter Bootstrap的JS文件

Answer 1

使用data-placement =“”标识符

这是如何为popover做的：

HTML <a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>

JS

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover(); 
});
</script>

对于下拉列表，这将有效，从下降到下降，
HTML

<div class="dropup">
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
</div>

如何向上打开自定义下拉菜单

1 个答案: