Bootstrap 5.1.3 Dropdown data-bs-boundary No Longer Works

Question

Prior to the v5 upgrade, I was using data-boundary="window" on a Dropdown with variable length menu items. This, assuming that data-bs-boundary is the new attribute, is no longer working.

The Dropdown is right justified on the page and due to this, dropdown items that are longer that the selected item are truncated by the edge of the window.

I have also played with the data-bs-popper attribute mentioned in the migration docs to no avail.

This was working fine in 4.6.

Update per request, here is some code (this is rendered markup from the browser)

<div id="CampaignSelector" class="nav-item dropdown" data-bs-boundary="body">
<button id="btnCampaignSelector" class="btn btn-primary text-uppercase dropdown-toggle" type="button" data-bs-toggle="dropdown">
    Macray's Keep Lobby
</button>
<div id="ddCampaignSelector" class="dropdown-menu" aria-labelledby="ddCampaignSelector">
        <div class="dropdown-item d-flex justify-content-between _campaign" data-campaign-id="00000000-0000-0000-0000-000000000000">
            <span>Macray's Keep Lobby</span>
        </div>
        <div class="dropdown-item d-flex justify-content-between _campaign" data-campaign-id="fba19b32-46f0-4650-b260-a0079a907c28">
            <span>Reign of Tiamat: Maquis of Westgate</span>
        </div>
        <div class="dropdown-item d-flex justify-content-between _campaign" data-campaign-id="2f87a37d-a387-41ec-87f7-ccf9004f4f6e">
            <span>A Dark &amp; Stormy Knight</span>
        </div>
        <div class="dropdown-item d-flex justify-content-between _campaign" data-campaign-id="0a5a8db5-617b-4797-ab41-eba75bd9ffea">
            <span>The Forgotten</span>
                <span class="badge badge-primary _unread-count"><i class="fas fa-fw fa-envelope" aria-hidden="true"></i>1</span>
        </div>
</div></div>

And this if it works better for you.

https://jsfiddle.net/q78n9p4v/

Mossy

Could you provide us with some code please? – Fears

Am I doing something wrong here? I even opened this as an issue on Github 10 days ago and there hasn't been so much as a comment. I don't expect a solution, but some sort of acknowledgement seems in order... Bootstrap...anyone...? – Mossy

I'm dealing with the same issue in Bootstrap 5.1. Did you ever resolve it? Please post an answer to your own question if you did. – Longs

I have not resolved it, and I've posted on Github as well which resulted in some finger pointing and a pull request by someone but certainly no resolution. This would appear to be a pissing match between Bootstrap and Popper which doesn't bode well for a solution. I've since run into it again, the only workaround that I have is avoiding use of dropdowns near the right border of anything. Completely unsatisfactory, but that's it so far. Here is the Github issue: github.com/twbs/bootstrap/issues/35397 – Mossy

@StevenFrank: I thought I tried this before, or maybe I didn't because if your comment. But adding the position-static class to the dropdown container did work for me. – Longs

I've had to use position-static in many places to get my dropdowns to work properly and when the container in question is not the viewport, it works well. My outstanding problem (which I have unfortunately reengineered the site is question to get around) was with regard to the right-side of the viewport, that is where position-static did not work. – Mossy

Answer 1

Just add the position-static class to the dropdown container.

Gurule

This only had the effect of positioning the dropdown portion on the opposite site of the screen from the trigger element, not at all a viable solution - but thanks anyway! – Mossy

What if any of the parents needs to have position relative as must situation for other child elements. – Kauffman

Works for me: <div class="btn-group position-static"><button type="butt... – Highway

This works - but the position-static should be placed in the <ul>, not in the <button> – Colloquialism

Answer 2

• data-bs-boundary="body"
• data-bs-boundary="html"
• data-bs-boundary="window"
• data-bs-boundary="videport"

As I've tested, none of these work.

Option 1

Adding postion-static class to dropdown container is working however when the parent container needs position relative or absolute, it might be an issue again.

So, my prefer way is to just add position-static class when dropdown is showing as below.

 const dropdowns = document.querySelectorAll('.dropdown-toggle');
    dropdowns.forEach(dropdown => {

        new bootstrap.Dropdown(dropdown, {
            popperConfig: {
                
                // To not flipping up
                // modifiers: [{
                //     name: 'flip',
                //     enabled: false
                // }]

            }
        })


        dropdown.addEventListener('show.bs.dropdown', function () {
           const dropdownParent = dropdown.closest('.btn-group');
           dropdownParent.classList.add('position-static')
        })

        dropdown.addEventListener('hide.bs.dropdown', function () {
           const dropdownParent = dropdown.closest('.btn-group');
           dropdownParent.classList.remove('position-static')
        })

})

Codepen Demo

---

Option 2

There is another solution using strategy: "fixed" of popper js by @woto here

The downside of this solution is - if a dropdown reaches the viewport corner and always show at the bottom (without flipping). It will hide into viewport as below.

Demoniac

Answer 3

Add position-fixed to the ul

<ul id="dropdown-elements" class="dropdown-menu position-fixed"  aria-labelledby="dropdownMenuButton">

Colloquialism