3

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/

Steven Frank
  • 551
  • 3
  • 16
  • Could you provide us with some code please? – bitski Nov 28 '21 at 23:45
  • 1
    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...? – Steven Frank Dec 04 '21 at 19:24
  • 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. – Jonathan Wood May 17 '22 at 18:24
  • 2
    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: https://github.com/twbs/bootstrap/issues/35397 – Steven Frank May 18 '22 at 12:58
  • @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. – Jonathan Wood Jun 14 '22 at 03:26
  • 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. – Steven Frank Jun 14 '22 at 12:08

3 Answers3

1

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

heyjoe1984
  • 29
  • 1
0
  • 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.

ronaldtgi
  • 687
  • 8
  • 17
0

Add position-fixed to the ul

<ul id="dropdown-elements" class="dropdown-menu position-fixed"  aria-labelledby="dropdownMenuButton">
Edward Gaere
  • 1,092
  • 6
  • 11