Bootstrap 5.1.3下拉数据边界不再起作用

mqxuamgl 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(3)|浏览(139)

在v5升级之前，我在一个带有可变长度菜单项的下拉列表中使用了data-boundary=“window”，但是，假设data-bs-boundary是一个新的属性，这个方法不再起作用了。
下拉列表在页面上右对齐，因此，比选定项长的下拉项会被窗口边缘截断。
我还使用了迁移文档中提到的data-bs-popper属性，但没有效果。
这在4.6中运行良好。
根据请求更新，下面是一些代码（这是从浏览器呈现的标记）

<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>

还有这个如果它对你更有效的话。
https://jsfiddle.net/q78n9p4v/

twitter-bootstrap

来源：https://stackoverflow.com/questions/70098157/bootstrap-5-1-3-dropdown-data-bs-boundary-no-longer-works

3条答案

按热度按时间

9lowa7mx1#

只需将position-static类添加到dropdown容器中。

赞(0）回复(0）举报 2022-12-07

vtwuwzda2#

Popper 2.×使用JavaScript的Document方法querySelector()设置“检查元素溢出的区域”。
不要将window指派给data-bs-boundary，而是尝试将选取器（例如类型选取器body或html）指派给它：

data-bs-boundary="body"

赞(0）回复(0）举报 2022-12-07

5ssjco0h3#

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

据我测试，这些都不起作用。

选项1

将postion-static类添加到下拉容器中可以正常工作，但是当父容器需要位置relative或absolute时，可能会再次出现问题。
所以，我更喜欢的方法是在下拉菜单显示如下时添加position-static类。

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

选项2

这里有另一个使用popper js的strategy: "fixed"的解决方案。
这个解决方案的缺点是-如果下拉菜单到达了视口的角落，并且总是显示在底部（没有翻转）。它将隐藏在视口中，如下所示。

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 5.1.3下拉数据边界不再起作用

3条答案

选项1

选项2

相关问题

热门标签

最新问答