显示Bootstrap-5从溢出的容器下垂
显示Bootstrap-5从溢出的容器下垂
提问于 2022-03-31 12:09:05
正如已经问过的这里，我需要将下拉菜单添加到具有x方向滚动(水平滚动)的表元素中，在最后一列中有一个三点图标，其中我需要添加下拉元素。但是下拉菜单总是夹在表中，这不是很好的用户体验。
根据引导程序文档，有一个名为boundary的选项，但是我不知道这个边界选项是如何工作的，甚至不知道它是否完全工作，以及如何工作。
如果我删除与类dropdown的下拉父母的相对位置，也从所有的祖先中移除不是静态的，那么我就得到了正确的行为。我不认为这是正确的方式，以删除相对位置，只有让这个下拉菜单出容器。
这是唯一的解决方案还是boundary有意义？我不知道popperconfig是如何工作的，我应该如何使用boundary aka data-bs-boundary
在引导的早期版本中，经过一些代码调整，我过去一直在body元素的末尾获得整个下拉列表，但这一点并不确定。
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-09-29 08:02:33
因此，当下拉列表实际上位于溢出父母/祖先父母之一的下面时，需要考虑多个问题(宏伟、伟大等等)。
- 当没有css转换/不透明(或创建堆叠上下文的任何其他属性)应用于任何父/s时，我们可以将位置静态应用于所有父/s，以快速修复它，而不需要任何javascript额外代码。但是，当任何第三方库在中间添加许多其他元素时，这是没有帮助的。
- 当有transform属性应用于父/s时，我们还需要考虑这种情况，因为transform还创建了一个新的堆叠上下文，甚至对于固定位置元素也是如此。在这种情况下，我们必须将下拉菜单从容器中移出。这是问题的答案，请详细讨论。
考虑到有多个像myPopperDropdown这样的id下降-1，2等等。所有这些都被隐藏在父/s上的溢出下，我们可以这样做。
$("[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>
到目前为止，还没有找到任何其他更好的解决方案，甚至在popperConfig中的更改也由于应用于固定位置的限制而无法工作。
最初的答案是在由溢出裁剪的引导下拉:隐藏容器，如何更改容器？。在这里做了一些修改。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71692213
复制相关文章
相似问题
腾讯云开发者
