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.