Bootstrap Dropdown Clipped by Overflow:Hidden Container, How to Change The Container

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/

Show Bootstrap-5 dropdown out of overflowing container

So here there are multiple things to consider when dropdown actually clips under the overflow parent/one of the ancestor parents(grand, great-grand and so on...)

• We can apply position static to all parent/s to apply as a quick fix this without any javascript extra code when there are no css transformations/opacity (or any other property which creates stacking context) applied on any of them. But this is not helpful when any third party library adds many other elements in between.
• We also need to consider the case when there is transform property applied to the parent/s because transform also creates a new stacking context even for the fixed position element. So in that case we have to move the dropdown menu out of the container. This question's answer discuss more on it.

Considering that there are multiple dropdowns with id's like myPopperDropdown-1, 2 etc.. which all are clipped under overflow hidden on one of the parent/s, we can do something like this.

 $("[id*='myPopperDropdown-']").each(function(el,index) {
                var parent, dropdownMenu, left, top;
                $(this).on('show.bs.dropdown',function(){
                    parent = $(this).parent();
                    dropdownMenu = $(this).find('.dropdown-menu');
                    left = dropdownMenu.offset().left -  $(window).scrollLeft();
                    top = dropdownMenu.offset().top - $(window).scrollLeft();

                    $('body').append(dropdownMenu.css({
                        position:'fixed',
                        left: left, 
                        top: top
                    }).detach());
                })

                $(this).on('hidden.bs.dropdown',function(){
                    $(this).append(dropdownMenu.css({
                        position:'absolute', left:false, top:false
                    }).detach());
                })
            })

body {margin: 10px !important}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="card">
    <div class="card-body bg-light overflow-hidden">
        <div class="bs-dropdown-1">
            <div class="dropdown" id="myPopperDropdown-1">
                <a class="btn btn-primary dropdown-toggle" role="button" href="javascript:void(0)" aria-expanded="false" data-bs-toggle="dropdown">Dropdown-1</a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="card-body bg-light overflow-hidden mt-3">
        <div class="bs-dropdown-2">
            <div class="dropdown" id="myPopperDropdown-2">
                <a class="btn btn-primary dropdown-toggle" role="button" href="javascript:void(0)" aria-expanded="false" data-bs-toggle="dropdown">Dropdown-2</a>

            <ul class="dropdown-menu" style="position: absolute;">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul></div>
        </div>
    </div>
</div>

How to fix the overflow hidden for bootstrap dropdown menu?

EDIT:
As requested, this should work:

@media only screen and (min-width: 600px) {
    ul{
      position:fixed !important;
      right: 0;
      left: auto;
    }
}

This will make ul and it's children not be clipped. Therefore, overflow:hidden will not be applied to them. Also, this will align your elements to the right.

<nav class="navbar navbar-expand-sm navbar-dark navbar-fixed fixed-top">

This will make your navbar fixed on the top.

Bootstrap drop down cutting off

Check whether media class is has overflow:hidden. If so, replace it with overflow: auto or overflow: visible.

---

Related Topics