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

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/

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.

Ng Bootstrap >= 4.1.0 (Angular powered Bootstrap) solution:

For anyone struggling with the same issue, but using ng-bootstrap, here's a solution for you - use container="body" option in your ngbDropdown:

<div ngbDropdown container="body">
    <!-- Dropdown menu goes here -->
</div>