Bootstrap dropdown clipped by overflow:hidden container, how to change the container?

Question

Using bootstrap, I have a dropdown menu(s) inside a div with overflow:hidden, which is needed to be like this. This caused the dro

Answer 1

Changing the container is possible using jQuery e.g. $(".dropdown").insertAfter(".bs-example");

See this code for example: https://jsfiddle.net/SolveItSimply/pwmyvsw6/

I don't recommend this though, as you will lose any of the usefulness of Bootstrap positioning and keeping the drop-down elements in order will be messy.

Instead, you could use overflow:visible along with the 'hidden' class to your advantage, hiding any element that overflows with JavaScript. Here's an example: http://jsfiddle.net/SolveItSimply/z14c210x/

You will need to check the contained elements when the div is first visible and whenever the height of the container changes, which I've tried to demonstrate in my example.