带有溢出的模态中的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>

> Demo fiddle