ui-选择带有溢出的模态下拉列表

Question

我目前正面临一个问题，即在ui bootstrap模式中显示ui-select下拉列表，其中应用了溢出css。

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

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

以下的plunker演示了我面临的问题。模态中的溢出切换按钮将在应用/未应用溢出之间切换，以便演示问题和所需结果。

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

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

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>

> Demo fiddle