Unable to set dropdown boundary in Bootstrap 5

Discussed in https://github.com/twbs/bootstrap/discussions/36383

<div type='discussions-op-text'>

^{Originally posted by SoftCircuits May 17, 2022} I had the following markup working in Bootstrap 4.

<div class="dropdown">
    <span type="button" class="dropdown" data-toggle="dropdown" data-boundary="viewport">
        <img src="~/images/menu.png" title="Menu" />
    </span>
    <div class="dropdown-menu dropdown-menu-right">
        <a asp-page="AddBol" class="dropdown-item">Manual Entry</a>
    </div>
</div>

However, when I upgraded to Bootstrap 5, the dropdown no longer opens.

I figured out that I need to change the data-toggle attribute to use the data-bs-toggle attribute instead. Now the dropdown works.

However, the data-boundary="viewport" attribute no longer works. This attribute allows the dropdown to extend outside the container element. As it is now, the dropdown is cut off when its bounds fall outside of the container.

I tried using data-bs-boundary="viewport" and data-bs-boundary="body" as suggested in this Stackoverflow question.

Does anyone know how to use this attribute in Bootstrap 5?

</div>

---

More Details

I have a dropdown within a table. It works fine unless the table is empty, in which case the dropdown is clipped where it would extend outside of the table area.

This was fixed before by setting data-boundary="viewport". But I upgraded to Bootstrap 5 and now the problem is back.

I tried updating this attribute to data-bs-boundary="viewport" but that has no effect.

Does anyone know the reason? Is this related to popper? Where I should post about this?

Thanks. Below is my markup (it’s ASP.NET/Razor Pages).

<div class="table-responsive">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>@Html.DisplayNameFor(m => m.TruckBols[0].TruckNumber)</th>
                <th>@Html.DisplayNameFor(m => m.TruckBols[0].BoxNumber)</th>
                <th>@Html.DisplayNameFor(m => m.TruckBols[0].PurchaseOrder)</th>
                <th>@Html.DisplayNameFor(m => m.TruckBols[0].Product)</th>
                <th>@Html.DisplayNameFor(m => m.TruckBols[0].InboundWeight)</th>
                <th>@Html.DisplayNameFor(m => m.TruckBols[0].ArrivalTime)</th>
                <th class="text-end">
                    <div class="dropdown">
                        <span type="button" class="dropdown" data-bs-toggle="dropdown" data-bs-boundary="viewport">
                            <img src="~/images/menu.png" title="Menu" />
                        </span>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a asp-page="AddBol" class="dropdown-item">Manual Entry</a>
                        </div>
                    </div>
                </th>
            </tr>
        </thead>
        <tbody>
            @if (truckCount > 0)
            {
                foreach (TruckSummaryModel truck in Model.TruckBols!)
                {
                    <tr>
                        <td>@Html.DisplayFor(m => truck.TruckNumber)</td>
                        <td>@Html.DisplayFor(m => truck.BoxNumber)</td>
                        <td>@Html.DisplayFor(m => truck.PurchaseOrder)</td>
                        <td>@Html.DisplayFor(m => truck.Product)</td>
                        <td>@Formatter.Number(truck.InboundWeight)</td>
                        <td>@truck.GetFormattedArrivalTime(Model.UserContext.TimeZoneId)</td>
                        <td class="text-end">
                            <a asp-page="ArriveTruck" asp-route-id="@truck.Id"><img src="/images/edit.png" title="Edit" /></a>
                            <a asp-page="DepartTruck" asp-route-id="@truck.Id"><img src="/images/depart.png" title="Depart Truck" /></a>
                        </td>
                    </tr>
                }
            }
        </tbody>
    </table>

---

This online example demonstrates the issue.

https://codepen.io/korki43/pen/mdRGgMK?editors=1000

[kadsyy]

Try adding ‘position-static’ class inside here

<div class="dropdown position-static">

Please try if its work on other browser as well.

[GreathostRo]

After more than a few hours and various attempts I found the working version:

const dropdowns = document.querySelectorAll('.dropdown-toggle')
const dropdown = [...dropdowns].map((dropdownToggleEl) => new bootstrap.Dropdown(dropdownToggleEl, {
    popperConfig(defaultBsPopperConfig) {
        return { ...defaultBsPopperConfig, strategy: 'fixed' };
    }
}));