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

Just change the overflow value to visible.

Answer 2

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.

Answer 3

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/

Answer 4

I had some kind of scroll problem with most of solutions in this and other questions I've seen on SO. What worked for me was making the dropdown position inherit:

.dropdown {
  position: inherit;
}

And then set the dropdown-menu position using JavaScript:

$(document).on("show.bs.dropdown", function () {
  var dropdownToggle = $(this).find(".dropdown-toggle");
  var dropdownMenu = $(this).find(".dropdown-menu");
  dropdownMenu.css({
    "top": (dropdownToggle.position().top + dropdownToggle.outerHeight()) + "px",
    "left": dropdownToggle.position().left + "px"
  });
});

Here is a working example: http://jsfiddle.net/ck66ee9q/

Answer 5

I couldn't set the container to overflow:visible, but inserting a

<div class="clearfix" />

below the block containing the Dropdown solved the problem for me.

Answer 6

All suggestions that have been made here have some kind of lacking things and I could not make them work properly. So I have made this one based on all suggestions and works great for me.

I have used another class here to make it different than regular dropdown elements that I might wanna have them run in the regular way.

$(document).on("show.bs.dropdown", ".dropdown.my-body-dropdown", function () {

    //original dropdown element
    var thisDropdown = $(this);

    //make a deep clone
    var thisDropdownCopy = thisDropdown.clone(true, true);

    //append to the body with a different class which is my-modified-dropdown here 
    //and open which will make dropdown menu show up
    $("body").append( thisDropdownCopy.addClass("my-modified-dropdown open").css({ "position": "absolute", "left": thisDropdown.offset().left, "top": thisDropdown.offset().top }).detach() );

    //hide the original dropdown element
    $(this).hide();

})
.on("hidden.bs.dropdown", ".dropdown.my-body-dropdown", function() {

    //remove modified dropdowns
    $(".dropdown.my-body-dropdown.my-modified-dropdown").remove();

    //show original dropdowns
    $(".dropdown.my-body-dropdown").show();

});