Display popover inside parent div with overflow: hidden

Question

I write in angularJS, and I could not find a convenient solution for this problem - I have an element divwith a property overflow: hidden(since I use the internal scroll bar), and inside divI have a menu dropdownthat is launched by pressing a button. unfortunately dropdownpartially hidden (because it exceeds the boundaries of its parent div.

The best solution I have found so far is to dynamically add a popover to the body and calculate its position for each button click, but this is a bit complicated, since I also use a scroller ...

Any help would be greatly appreciated. Thank you Tammy

Answer 1

Usually you can’t do this without deleting the property overflow: hidden;or using the positions absolutefor your div and drop-down menu, which can be a bit complicated (do a search, there are a lot of topics on Stackoverflow).

But you can achieve this with the help of position: fixed;knowing that it will be browser dependent; see working example: http://jsfiddle.net/Nf7u4/