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 dropdowns to be clipped by the container.

My question, how can I solve this clipping issue, e.g. change the container of all dropdowns inside my project to be body, with lowest cost possible?

this is an example of the code: http://jsfiddle.net/0y3rk8xz/

Answer 1

if anyone interested in a workaround for this, bootstrap dropdown has a show.bs.dropdown event you may use to move the dropdown element outside the overflow:hidden container.

$('.dropdown').on('show.bs.dropdown', function() {   $('body').append($('.dropdown').css({     position: 'absolute',     left: $('.dropdown').offset().left,     top: $('.dropdown').offset().top   }).detach()); }); 

there is also a hidden.bs.dropdown event if you prefer to move the element back to where it belongs once the dropdown is closed:

$('.dropdown').on('hidden.bs.dropdown', function() {   $('.bs-example').append($('.dropdown').css({     position: false,     left: false,     top: false   }).detach()); }); 

Here is a working example:

http://jsfiddle.net/qozt42oo/32/