ui-select dropdown in modal with overflow

Question

I'm currently facing an issue with displaying a ui-select dropdown within a ui bootstrap modal, which has an overflow css applied.

Currently, when opening the ui-select dropdown, the list of choices opens within the modal and is partially hidden by the overflow-y:scroll; style which is applied to the modal body.

I would like to find a solution whereby the dropdown sits outside of the modal overflow and can overlap with the edges of the modal, the same way it would if the modal does not have an overflow applied.

The following plunker demonstrates the issue I am facing. The overflow toggle button in the modal will switch between overflow being applied/not applied, in order to demonstrate the issue and the desired outcome.

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

The overflow-y: scroll is required for the modal body in this case. The modal header & footer must be visible on the page without scrolling. The overflow is added to the modal-body to apply scrolling to only this area, to allow information to be added to this area without increasing the modal height below the bottom of the page. The data displayed in the modal-body can be dynamically edited by the user, which can add additional rows of data to the modal, each of which can contain ui-select elements.

Answer 1

Just remove overflow-y:scroll and you will be fine. This allows the dropdown to overlap the modal box.

<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