Display a popover inside a div parent with overflow:hidden

Question

I'm writing in angularJS and I couldn't find a comfortable solution for this issue- I have a div element with overflow: hidden property (since i'm using internal scrollbar) and inside that div I have a dropdown menu, triggered by a button click. unfortunately, the dropdown in partially hidden (since it is exceeding the borders of its div parent.

The best solution i've found so far is to add the popover dynamically to the body and calculate its position for every button click, but it is a bit complicated since i'm also using a scroller...

Any help would be appreciated. Thanks! Tammy

Answer 1

Normally you shouldn't be able to do it without either removing overflow: hidden; property, or use absolute positions for your div and dropdown menu, which can be a bit tricky (make some search, there is a lot of topics on Stackoverflow).

But you can achieve it with position: fixed;, knowing that it will depend on the browser ; see a working example : http://jsfiddle.net/Nf7u4/