Show Bootstrap-5 dropdown out of overflowing container

Question

As already asked here, i need to add dropdown into the table element which has scroll to x-direction (horizontal scroll) and in the last column there is one three dot icon where I need to add dropdown element. But dropdown menu always clips inside the table which is not good user experience.

As per the, Bootstrap doc, there is option named boundary but I am not getting how this boundary option works or even don;t know whether it entirely works or not and how.

If i remove relative position from dropdown parent which is with class dropdown and also remove from all the ancestors which is not static then I am getting correct behavior. I don;t feel it's the correct way to remove position relative only for getting this dropdown-menu out of container.

Is this the only solution or the boundary makes sense? I am not getting how popperconfig works and how should I use boundary aka data-bs-boundary?

In earlier version of bootstrap, with some code tweak, I used to get entire dropdown all the way at the end of the body element but not sure with this.

Hi @JonathanWood, I have found that the only way that keeps dropdown menu out of scrolllable container is to remove position relative on any of the ancestors that comes under this scroll. It is actually the css issue because as per the theory of position relative and absolute, we have keep position static on all parents under which absolute comes or else absolute will be considered under those. — Shashank Bhatt, Jun 14 '22 at 02:58
Or if could possibly try this hack then there will no need for changing position. https://codepen.io/qpqinc/pen/yLyPVMJ — Shashank Bhatt, Jun 14 '22 at 03:13
That codepen appears to be using an old version of Bootstrap. With Bootstrap 4, I could resolve the issue with `data-boundary="viewport"`, but that is broken in Bootstrap 5. — Jonathan Wood, Jun 14 '22 at 03:45

Shashank Bhatt · Accepted Answer · 2022-11-20T17:49:09.617

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>

As of now not found any other better solution than this and even changing in popperConfig also not working due to restrictions applied even on fixed positioning.

Original answer was at Bootstrap dropdown clipped by overflow:hidden container, how to change the container?. which is somewhat modified here.

Show Bootstrap-5 dropdown out of overflowing container

1 Answers1