Make dropdown menu go upwards if it is at the bottom of the browser window

[michaelhunziker]

Dear all!

We're having a little issue with dropdowns. We're using dropdown menus tables (context menus). As you can see in the fiddle below, the dropdown menus of the rows at the bottom of the browser window are not completely visible (you would have to use your scrolling wheel to see the whole menu).

http://jsfiddle.net/mhu23/YZx7R/22/

What I learned from bootstrap was that you can use the class "dropup" to open the menus upwards (see code comment in fiddle). But now I'm stuck implementing an intelligent solution. Should I create a directive which dynamically adds the class dropup? But how do I decide if the menu is "rendered" outside the view scope?

Thanks a lot for your help!

Michael

[caitp]

Maybe (similar to tooltips) it would be good to have an optional "where" option which defaults to down, but could be overridden?

[michaelhunziker]

You're talking about the "tooltip-placement" attribute right?

The problem is this is still pretty static... What I'd like to implement is a solution which dynamically decides whether the dropdown is rendered upwards or downwards. But I don't know how to do this.

[jfairley]

The "dynamic decision" solution sounds nice, but I'm going to guess it's complicated, since this issue is quite dormant. Too bad there is still no solution to this. 😦

[rvanbaalen]

Related: #1012, #375

[rysilva]

Could this be fixed by modifying the $position service to behave more like the jquery-ui position, which takes the viewport into account? http://api.jqueryui.com/position/

Somewhat related to #3820 -- I could fix that by changing the $position call to look for dropdown-menu-right and position accordingly, but if $position was smarter that would take care of the dropup behavior as well.