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.

Obtect

Btw. there is no overflow toggle button you modal. – Wrongdoing

Thanks for pointing that out, I've updated the plunker to include the missing toggle button. – Obtect

I'm struggling with the same issue now. Were you able to resolve it after all? – Youthful

Thanks for the plunkr, exactly the issue I am facing - I am seeing a lot of questions asked about why overflow is needed - but couldn't find an answer. Any luck recently? – Gethsemane

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

Wrongdoing

The overflow-y:scroll is required in this case due to the modal design, so unfortunately removing the style wouldn't be a suitable option. If there are no alternatives however, this may have to be considered. – Obtect

@Obtect why is it required? – Wrongdoing

It's required as the information which will be displayed in the modal can be quite large in height at times. I need the modal header & footer to always be visible to the user on the page without scrolling, yet still keep all the information present in the modal body. The overflow-y:scroll; works perfectly for this, with the exception of these ui-select issues. – Obtect

@Obtect So why dont you set the wrapper of your "information element" to overflow: scroll instead of the whole modal? – Wrongdoing

The information elements within these modals can contain ui-select elements and are dynamically editable by the user. For example, new rows of data can be added, which can contain ui-select elements and need to be scrollable. – Obtect

@Obtect This doesnt answer my question. Why don't you set the wrapper of these elements to overflow: scroll instead the whole modal? – Wrongdoing

Setting the wrapper of these elements with an overflow:scroll; has the same effect as adding this style to the modal-body. The ui-select dropdown will appear within the wrapper scroll and will be hidden in this area, rather than appearing on top of the scroll area. – Obtect

@Obtect I don't believe this. Could you create a fiddle example of what you are trying? Adding overflow: scroll to a specfici element should not effect parent elements. – Wrongdoing

The parent elements are unaffected, however the ui-select elements can feature in the information within the wrapper and are child elements within the wrapper. I have made the following plunker to demonstrate this by moving the overflow:scroll to a wrapper around the information, plnkr.co/edit/OB7rYzfCiSiNJPzVrOSA?p=preview – Obtect

@Obtect oh yea, thank you. Know your problem is reproduceable. I will give you a solution to this in the next hour. Currently stucking on some other stuff. – Wrongdoing

@Wrongdoing any success? – Sepulchre