帶有溢出的模態中的 ui-select 下拉列表

Question

我目前面臨在 ui 引導模式中顯示 ui-select 下拉列表的問題，該模式應用了溢出 css。

目前，當打開 ui-select 下拉菜單時，選擇列表會在模態中打開，並且被overflow-y:scroll;部分隱藏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>

>演示小提琴