Add an append-to-body attribute for improved layering. #718
Conversation
…ive that moves the dropdown element to the end of the document body before opening it, thereby solving problems with the dropdown being displayed below elements that follow the `<ui-select>` element in the document. This implementation is modeled after the `typeahead-append-to-body` support from UI Bootstrap. See angular-ui#41 (and quite a few dupes).
|
+1 |
1 similar comment
|
+1 |
| role="listbox" | ||
| ng-show="$select.items.length > 0"> | ||
| ng-show="$select.open"> |
There was a problem hiding this comment.
Can you explain why this was changed? We have so many nuanced use cases for this project, I worry this could break the template for one of the many in our large array.
There was a problem hiding this comment.
I'll back that out, it isn't needed, and results in empty dropdown appearing with the Bootstrap theme.
|
Thanks for this @cmlenz! My main concern is that I've previously seen issues where select2, due to it's attaching elements to the |
…en the scope is destroyed. This fixes issues with the dropdown potentially sticking around when the user navigates away, or the select field is otherwise removed.
|
Thanks for the detailed review @brianfeister. Good point about the dropdown hanging around after the select is gone. For demonstration purposes, wrapping the select in an That should be easy to fix by removing the dropdown on |
…strap theme, but in a way that works even when the choices element is pulled out of the select element.
|
Thanks! Also I meant /examples not /demos :P |
|
I've noticed that the chosen approach just does not work with the Select2 theme. The problem is that I expected the I'm currently playing with an alternative approach that moves the whole select element to the body when it is open. |
…s being calculated incorrectly for non-multiple select instances using the Bootstrap theme. Remedy by only calling the sizing function when the select is in multi mode, which is how this function is guarded in other call sites as well.
…s being calculated incorrectly for non-multiple select instances using the Bootstrap theme. Remedy by only calling the sizing function when the select is in multi mode, which is how this function is guarded on other call sites as well.
Fix for sizing bug introduced by #718
|
#736 has a simpler patch that also supports the Select2 theme. |
…s being calculated incorrectly for non-multiple select instances using the Bootstrap theme. Remedy by only calling the sizing function when the select is in multi mode, which is how this function is guarded on other call sites as well.
Add an
append-to-bodyattribute to the<ui-select-choices>directive that moves the dropdown element to the end of the document body before opening it, thereby solving problems with the dropdown being displayed below elements that follow the<ui-select>element in the document. This implementation is modeled after thetypeahead-append-to-bodysupport from UI Bootstrap. See #41 (and quite a few dupes).I have only tested the Bootstrap theme.
Here's a Plunk showing an example:
http://plnkr.co/cwVLBfI6Ebo5oLj15QWd
(Based on my Plunk in #713 which shows the broken behavior without
append-to-body).