search

angular-ui / ui-scroll

Unlimited bidirectional scrolling over a limited element buffer for AngularJS applications
http://angular-ui.github.io/ui-scroll/demo/
MIT License
327 stars 107 forks source link

Dropdown inside tables get cropped out #146

Closed amejiarosario closed 7 years ago

amejiarosario commented 7 years ago

Before the ui-scroll, the dropdown shows properly image

After adding the ui-scroll, the dropdown extends the scroll inside the table. That's because the viewport height must be constrained...

image

Any way to overcome this?

dhilt commented 7 years ago

@amejiarosario I believe, the answer is "yes". Looks like a markup issue and there should be a way to solve it by dropdown styles adjustment. I'm not strong enough in css stuff to suggest a solution blindly, but I could try to make a research... if you make a repro (plunker or whatever)

amejiarosario commented 7 years ago

@dhilt thanks a lot your quick response! Here is the plunker illustrating the issue:

https://plnkr.co/edit/22e9bo?p=preview

When you go to the last row (no. 25) and click edit you will see that the dropdown it's cropped out ... Let me know if you are able to figure it out. I'd really appreciate it. I have spent some days on this without luck)

image

dhilt commented 7 years ago

@amejiarosario Thanks for repro! I made a little research, it seems to be a common issue (for example http://stackoverflow.com/questions/35128366/overlay-bootstrap-dropdown-menu-over-hidden-scrollbar), which is surely not a responsibility of the ui-scroll directive, and I could't find simple solution.

But! There is a repo under the roof of our lovely Angular-UI team, which is called angular-ui/bootstrap. This is a great wrapper for native bootstrap components. Among other things, it has Dropdown directive wich has a lot of useful settings. And one of these settings is "dropdown-append-to-body". It appends the inner dropdown-menu to the body element. So the dropdown-menu will be rendered over all HTML-document, regardless of its initial place in DOM.

Please take a look for https://angular-ui.github.io/bootstrap and try Dropdown directive, this should help!

amejiarosario commented 7 years ago

Thanks for your answer @dhilt, spot on! I ended up using dropdown-append-to-body as you suggested and also dropup for the ones at the bottom.