move drop down to base of <body> to stop it from being cut off (drop.js) #591
Conversation
|
+1 I like the idea. Many other libraries do that sort of DOM manipulation in order to avoid document flow / overflow / scrolling issues. |
|
This seems to be pretty good solution to this problem (or the problems mentioned on all the related issues). I had an issue with dropdown hiding outside the window when located near the bottom of the browser window, but after applying these modifications the dropdown opened automatically into a proper place (also above the search box). However, I do not know if including other libraries is good idea (or accepted by the library maintainers' policy?)... so just thinking, would it be possible to separate this amendment to an external library, bridging drop.js and ui-select together? |
|
@brianfeister (or other maintainers) any thoughts here? I would be willing to pull out functionality into this project if it is what's needed for an eventual merge. (However, testing the floating in this project will be fun.) Would probably just get the important parts of tether.js (which drop.js uses), unless there is a better base out there. |
|
@aeharding Do you think this can work for the bootstrap theme? |
|
@FFelling definitely, I just have to tweak some things. I didn't event check the bootstrap theme. ;) |
|
@dimirc or @brianfeister Do you have any opinions on how this should be resolved? I'm willing to invest some time into making a much cleaner solution (with tests) if you give me an idea on the general direction (including 3rd parts deps or not). |
|
Could this be made an optional attribute on the |
|
One of @dimirc's goals with this project was it to be a native, lightweight alternative to select2. As such, we want to minimize our dependency matrix. I'm opposed to using an extra library like drop.js. It's 12k which is non-trivial since that will be added on top of our existing footprint. If you want to rewrite this in native Angular then I would be willing to consider a PR for this feature. I agree with @santialbo about style. Make it an option on the Also, your current PR is failing the Travis CI build, make sure that passes and make sure to write your own test coverage for your feature. |
|
Cool, I'll get working on it! It'll be completely different code, since it won't be a hack. |
|
Awesome, ping me when you're done and I'll try to take a look. Apologies in advance for communication latency. Day jobs, money, and all that boring stuff. |
|
FYI, the old stuff from this PR was moved to this branch: I am working on new stuff (with the latest from master, as of yesterday) here: I will be incrementally committing. Please comment here with any suggestions -- I will reference this PR when creating a new PR for my new stuff. Eventually, I'll squash and conventionalize my commit(s). |
|
What happened with this? |
|
I also would like to know what happened to this. |
|
Have we had any good solution for this problem? |
|
Please look at the appendToBody attribute in the documentation. https://github.com/angular-ui/ui-select/wiki/ui-select |
|
@aeharding necro post but, this appendToBody doesn't work for me, when I use it (having the ui-select inside a modal-body), I cannot click on the input field anymore |
Hi, guys! I'd like to open up the discussion on separating the drop down from the input field. This provides many benefits, including having it pop over any content areas that many have overflow hidden, scrolling, etc.
I did a proof-of-concept to demonstrate how this could work in this pull requests. I'm currently using drop.js for tethering and whatnot. It works with the select2 style in the example I created, with a situation where a normal UI Select dropdown would be hidden past the containing div's red border.
This allows the dropdown to flow outside of the area it's 'contained' within.
(For example, modals and scrollable content areas.)
Plunker: http://plnkr.co/edit/EFQWcabsZBxC81Aa0wRC?p=preview
Related issues: #308, #234, #206, #41... And more! :-D
Please do not merge this commit in its current state. :-) Shit's broken and I tested exactly 0 use cases besides that in the example above. Again, this is a POC to spark discussion.