带有溢出的模式中的 ui-select 下拉菜单

Question

我目前面临着在 ui 引导模式中显示 ui-select 下拉菜单的问题，该模式应用了溢出 css。

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

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

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

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

overflow-y: scroll在这种情况下，模态体是必需的。模态页眉和页脚必须在页面上可见而无需滚动。将溢出添加到模态主体以仅将滚动应用于此区域，从而允许将信息添加到此区域，而无需增加页面底部下方的模态高度。用户可以动态编辑 modal-body 中显示的数据，这可以向 modal 添加额外的数据行，每行数据都可以包含 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>

>演示小提琴