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

I faced the same issue, with needing to have overflow:hidden set, but yet have the drop-down not be clipped.

However my situation involved the Bootstrap Carousel, so I decided a valid solution would make the overflow visible only when the dropdown is opened, and when it closes, the overflow can return to hidden. This solution might work for others, so I'm sharing it.

$('.dropdown-toggle').click(function() {
  var $container = $(this).parent('.carousel-inner');
  $container.css('overflow','visible');
  $(document).one('click', function() {
      $container.css('overflow','');
  });        
});

Note, this doesn't check for Esc key being used to close the dropdown, but in my case this wasn't an issue. My own version uses a class to apply the style which some devs might prefer instead of modifying inline CSS.