Bootstrap下拉列表被溢出:隐藏容器,如何更改容器？

Question

使用自举,我有一个下拉菜单(小号内)div用overflow:hidden,这是需要这样.这导致下拉列表被容器剪切.

我的问题是,如何解决这个剪切问题,例如body,以尽可能低的成本更改项目中所有下拉列表的容器？

这是代码的一个例子:http: //jsfiddle.net/0y3rk8xz/

Answer 1

如果有人对此解决方法感兴趣,bootstrap下拉列表中有一个show.bs.dropdown事件,您可以使用该事件将下拉元素移动到overflow:hidden容器外部.

$('.dropdown').on('show.bs.dropdown', function() {
  $('body').append($('.dropdown').css({
    position: 'absolute',
    left: $('.dropdown').offset().left,
    top: $('.dropdown').offset().top
  }).detach());
});

如果您希望在关闭下拉列表后将元素移回其所属的位置,还会发生hidden.bs.dropdown事件:

$('.dropdown').on('hidden.bs.dropdown', function() {
  $('.bs-example').append($('.dropdown').css({
    position: false,
    left: false,
    top: false
  }).detach());
});

这是一个工作示例:

http://jsfiddle.net/qozt42oo/32/

Answer 2

使用 Bootstrap，5.2.1我们可以配置popperjs使用fixed突破父母的位置overflow: hiddden。

<div style="overflow: hidden">
  <div class="dropdown">
    <button class="dropdown-toggle"
            type="button"
            data-bs-toggle="dropdown"
            data-bs-popper-config='{"strategy":"fixed"}'>
      Dropdown
    </button>
    <ul class="dropdown-menu">
      <li>Item #1</li>
      <li>Item #2</li>
    </ul>
  </div>
</div>

<div style="overflow: hidden">
  <div class="dropdown">
    <button class="dropdown-toggle"
            type="button"
            data-bs-toggle="dropdown"
            data-bs-popper-config='{"strategy":"fixed"}'>
      Dropdown
    </button>
    <ul class="dropdown-menu">
      <li>Item #1</li>
      <li>Item #2</li>
    </ul>
  </div>
</div>

更新

同样来自Bootstrap 5.2.1 Docs也可以popperConfig通过 JS 传入。

const element = document.querySelector(".dropdown-toggle")
const dropdown = bootstrap.Dropdown.getOrCreateInstance(element, {
  popperConfig: {
    strategy: "fixed"
  }
)

Answer 3

Ng Bootstrap >= 4.1.0（Angular 驱动的 Bootstrap）解决方案：

对于任何遇到同样问题但使用ng-bootstrap 的人，这里有一个解决方案 - 使用您container="body"的选项ngbDropdown：

<div ngbDropdown container="body">
    <!-- Dropdown menu goes here -->
</div>

Answer 4

将div属性更改为overflow:visible;,或者Position:absolute;像.dropdown类一样 设置

.bs-example .dropdown{position:absolute;}

参见工作代码:http://jsfiddle.net/guruWork/3x1f8ng5/

Answer 5

这里提到的所有答案都不适合我，所以我找到了另一种解决方法：

$('.dropdown').on('shown.bs.dropdown', function () {
    const dropdown = $(this);
    setTimeout(function () {
        dropdown.find('.dropdown-menu').css({'top': dropdown.offset().top - $(window).scrollTop(), 'left': dropdown.offset().left - $(window).scrollLeft(), 'position': 'fixed'});
    }, 1);
});

超时是必要的，因为事件处理程序在引导程序设置下拉列表的 CSS 之前被触发，因此会覆盖它

Answer 6

我的解决方案是在下拉列表上使用静态定位。我在具有溢出隐藏的引导表内放置了下拉菜单。

<div class="table" style="overflow: hidden;">
  <div class="dropdown" style="position: static;">
    <div class="dropdown-menu">...</div>
  </div>
</div>

但是，这对您的小提琴无效。因此，我不确定我的解决方案是否与引导表有关。无论如何，也许它将给某人一些新的尝试。