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

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/

Change the div property to overflow:visible;, or Set Position:absolute; on .dropdown class like

.bs-example .dropdown{position:absolute;}

See the Working Code: http://jsfiddle.net/guruWork/3x1f8ng5/

My solution was to use static positioning on the dropdown. I had the dropdown inside a bootstrap table with overflow hidden.

<div class="table" style="overflow: hidden;">
  <div class="dropdown" style="position: static;">
    <div class="dropdown-menu">...</div>
  </div>
</div>

It didn't work with your fiddle, however. So I'm not sure if my solution had something to do with bootstrap tables. Regardless, perhaps it will give someone something new to try.