dropdown appears cutoff when used inside a div with overflow: auto

[pjfsilva]

Problem:
When ui-select is used inside a div with overflow: auto defined it doesn't appear "on top" of the div but instead is contained inside that div that obviously causes usability problems.

Example: http://plnkr.co/edit/cAZ548
click on the select to open it: the dropdown is inside the red div but it should be "always on top" of everything.

Solution:
The default from HTML always appears on the top of everything and the original jquery select2 already solved the problem (angular-ui/ui-select2 also solves the problem). The problem is simple: ui-select uses a relative positioning where it needs to use absolute positioning to "break out" from the overflow div. jquery select2 solves this in a very smart way by appending the list to the body element, effectively avoiding any div parents with overflow or relative positioning that can cause other problems. (an absolute div inside a relative div isn't anymore absolute to the whole document: http://css-tricks.com/absolute-positioning-inside-relative-positioning/ ) Using absolute positioning can also cause problems because if this dropdown is used inside a modal window that is draggable or if the user scrolls the page: the dropdown (select2-drop) position needs to be adjusted to the new position of the content. select2 solves using a "select2-drop-mask" around the whole document and when a user clicks anywhere closes the dropdown which is a good way to deal with this because the default from HTML also does this.

select2 example working fine: http://plnkr.co/edit/4jERkO - click on the select: content is on top of everything.

I believe the solution is already on jquery select2 plugin and it's just a matter of borrowing the good ideas from them. I couldn't find the issue that originated that specific fix on select2, but this seems to be a good lead: https://github.com/ivaynberg/select2/issues/149

My end goal is to use the select inside a Bootstrap modal window (modal-body has overflow auto content) that would be draggable but I simplified my test case to this specific scenario.

I'll be happy to help and provide more clarification as I investigated this quite a bit.

[mattcasey]

Why don't you search the issues list first!
#234
#206

PS. I really need a fix as well, so I totally understand the issue... I'm sure maintainer would appreciate a pull request, but hasn't been vocal about what path they would take to fix.

[pjfsilva]

Ok, thanks. But please note that just adding the drop down to the body isn't the full solution. From select2 it seems that the mask part is also very important to avoid bugs and this is why I haven't found those issues. I'm not sure how the author wants to manage these related issues so I don't know if I should close this....

[jimmywarting]

This was reported as an issue as early as #41 and has been given the 0.9.x milestone.
if you have solution to the problem, create pull request.

Think we can close this issue and keep everything in one thread

[Archelyst]

This does the trick for me:

    .ui-select-choices {
        position: fixed;
        top: auto;
        left: auto;
        width: inherit;
      }

[wesleycho]

Closing as a duplicate.

[ibecir]

@Tim-Erwin thanks dude, this stupid issue took me 3 days to resolve.

[JBongars]

on div.btn-group add style="z-index:auto;" like so:

<span class="input-group-btn">
  <div class="btn-group" style="z-index: auto">
    <button type="button" class="btn btn-default dropdown-toggle" dropdown-menu-hover data-toggle="dropdown" data-close-others="true">
      - Select Alert -
      <i class="fa fa-angle-down"></i>
     </button>
    <ul class="dropdown-menu pull-left" role="menu" style="height: 400px; overflow: auto;">
      <li ng-repeat="item in vm.options">
        <a ng-click="vm.addDetail('menu', item)">{{item.description}}</a>
      </li>
    </ul>
  </div>
</span>

[jayminpanchal]

@Tim-Erwin thanks. I was finding solution from last 2 days. thanks again.

[gsmdenis]

can using waterfall js and easy to fix :-)