ui-在带溢出的模式中选择下拉列表

Question

目前，我在ui引导模式中显示ui选择下拉列表时遇到了一个问题，该模式应用了溢出css。

当前，当打开ui选择下拉列表时，选择列表将在模型中打开，并被应用于模态体的overflow-y:scroll;样式部分隐藏。

我想找到一个解决方案，使下拉列表位于模态溢出之外，并且可以与模态的边缘重叠，就像如果模型没有应用溢出一样。

下面的柱塞说明了我所面临的问题。模式中的溢出切换按钮将在应用/不应用溢出之间切换，以演示问题和期望的结果。

https://plnkr.co/edit/7eZ7GuPFMiEFMT2hogMV?p=preview

在这种情况下，模态体需要overflow-y: scroll。模态页眉和页脚必须在不滚动的页面上可见。溢出将添加到模态体中，以将滚动应用于此区域，以便在不增加页面底部以下模态高度的情况下将信息添加到此区域。显示在模态体中的数据可以由用户动态编辑，用户可以向模型中添加额外的数据行，每个行都可以包含ui选择元素。

Answer 1

只要删除overflow-y:scroll，你就会没事的。这允许下拉列表重叠模态框。

<div class="modal-content">
  <div class="modal-header">
    <h4 class="modal-title">Test Modal</h4>
  </div>
  <div class="modal-body" style="height: 150px">
    <ui-select ng-model="selected">
      <ui-select-match>{{$select.selected}}</ui-select-match>
      <ui-select-choices repeat="data in vm.selectData | filter: $select.search">
        {{data}}
      </ui-select-choices>
    </ui-select>
  </div>
  <div class="modal-footer">
    <button class="btn btn-default" ng-click="vm.dismiss()">Close</button>
  </div>
</div>

> 演示小提琴