Question

使用bootstrap，我在div overflow:hidden内有一个下拉菜单（ s ），需要像这样。这导致下拉列表被容器剪掉。

我的问题是，如何解决此剪辑问题，例如将项目中所有下拉列表的容器更改为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

将div属性更改为Position:absolute;，或在.dropdown类上设置.bs-example .dropdown{position:absolute;}，如

1   2   3   4   5

请参阅工作代码：http://jsfiddle.net/guruWork/3x1f8ng5/

Answer 3

我的解决方案是在下拉列表中使用静态定位。我在bootstrap表中的下拉列表中隐藏了溢出。

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

然而，它并不适用于你的小提琴。所以我不确定我的解决方案是否与bootstrap表有关。无论如何，也许它会给某人一些新的尝试。

Answer 4

我遇到了同样的问题并且在搜索了几个小时之后..我创建了一个事件处理程序来捕获下拉切换并获取位置并动态附加它。所以它不会被切断。

这是我使用的简单代码。如果这有帮助，请尝试一下。

$('.dropdown-toggle').click(function (){
     dropDownFixPosition($('button'),$('.dropdown-menu'));
 });
 function dropDownFixPosition(button,dropdown){
    var dropDownTop = button.offset().top + button.outerHeight();
    dropdown.css('top', dropDownTop + "px");
    dropdown.css('left', button.offset().left + "px");
  }

Answer 5

我在这个以及我在SO上看到的其他问题中遇到了大多数解决方案的滚动问题。对我有用的是下拉位置inherit：

.dropdown {
  position: inherit;
}

然后使用JavaScript设置dropdown-menu位置：

$(document).on("show.bs.dropdown", function () {
  var dropdownToggle = $(this).find(".dropdown-toggle");
  var dropdownMenu = $(this).find(".dropdown-menu");
  dropdownMenu.css({
    "top": (dropdownToggle.position().top + dropdownToggle.outerHeight()) + "px",
    "left": dropdownToggle.position().left + "px"
  });
});

以下是一个工作示例：http://jsfiddle.net/ck66ee9q/

Answer 6

Ng Bootstrap> = 4.1.0（Angular Powered Bootstrap）解决方案：

对于遇到同样问题但使用ng-bootstrap的任何人，这是为您提供的解决方案-在container="body"中使用ngbDropdown选项：

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

Answer 7

我遇到了同样的问题，需要设置overflow:hidden，但却没有剪切下拉列表。

但是我的情况涉及Bootstrap Carousel，所以我决定一个有效的解决方案只有在打开下拉列表时才能看到溢出，当它关闭时，溢出可以返回隐藏状态。这个解决方案可能适用于其他人，所以我正在分享它。

$('.dropdown-toggle').click(function() {
  var $container = $(this).parent('.carousel-inner');
  $container.css('overflow','visible');
  $(document).one('click', function() {
      $container.css('overflow','');
  });        
});

注意，这不会检查用于关闭下拉列表的Esc密钥，但在我的情况下，这不是问题。我自己的版本使用一个类来应用某些开发人员可能更喜欢的样式，而不是修改内联CSS。

Answer 8

我有一个div元素和一个Bootstrap panel类，其中包含具有Bootstrap ComboBoxes类的div元素中的DevExpress col-lg。

我遇到panel背景颜色或边框颜色渗入上述div的问题。为了解决这个问题，我在overflow:hidden;上添加了panel，但这导致ComboBox的下拉菜单被切断。我将style="position: inherit"添加到了panel中包含ComboBox的div元素中，从而解决了该问题。

<div class="col-sm-12" style="position: inherit">
<div class="col-sm-4" style="position: inherit">
 <dx:aspxComboBox></dx:aspxComboBox>
</div>
</div>

我找到了here这个解决方案。

Answer 9

这里提出的所有建议都有些不足，我无法使其正常工作。因此，我根据所有建议做出了这一建议，对我来说非常有用。

我在这里使用了另一个类，使其与常规下拉元素不同，我可能希望它们以常规方式运行。

$(document).on("show.bs.dropdown", ".dropdown.my-body-dropdown", function () {

    //original dropdown element
    var thisDropdown = $(this);

    //make a deep clone
    var thisDropdownCopy = thisDropdown.clone(true, true);

    //append to the body with a different class which is my-modified-dropdown here 
    //and open which will make dropdown menu show up
    $("body").append( thisDropdownCopy.addClass("my-modified-dropdown open").css({ "position": "absolute", "left": thisDropdown.offset().left, "top": thisDropdown.offset().top }).detach() );

    //hide the original dropdown element
    $(this).hide();

})
.on("hidden.bs.dropdown", ".dropdown.my-body-dropdown", function() {

    //remove modified dropdowns
    $(".dropdown.my-body-dropdown.my-modified-dropdown").remove();

    //show original dropdowns
    $(".dropdown.my-body-dropdown").show();

});

Answer 10

您也可以通过将 yourDivId 替换为div的ID来尝试这一操作。

$('.dropdown').on('show.bs.dropdown', function() {
    $('#yourDivId').css('overflow-x', 'visible');
});

$('.dropdown').on('hidden.bs.dropdown', function() {
    $('#yourDivId').css('overflow-x', 'hidden');
});

Answer 11

这里提到的所有答案均不适用于我，因此我找到了另一种解决方法：

$('.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 12

耶稣基督的人们都采取了简单而复杂的做法。将下拉位置更改为position：static;和BLAMMMMMMM！问题已解决。我想我看到其他人提到了这一点，但后来他们被过分and肿的修补程序淹没了：（

Answer 13

我最终使用了tippy.js的bootstrap下拉菜单，它解决了以下溢出：隐藏的父级问题，因为下拉菜单可以位于body标签中。

Answer 14

使用jQuery可以更改容器，例如$(".dropdown").insertAfter(".bs-example");

请参阅此代码，例如：https://jsfiddle.net/SolveItSimply/pwmyvsw6/

我不推荐这个，因为你将失去Bootstrap定位的任何有用性，并且保持下拉元素的顺序会很混乱。

相反，您可以使用overflow:visible以及隐藏的＆＃39;为了你的优势，隐藏任何溢出JavaScript的元素。这是一个例子：http://jsfiddle.net/SolveItSimply/z14c210x/

当div首次可见时以及容器的高度发生变化时，您需要检查所包含的元素，我试图在我的示例中进行演示。

Answer 15

我无法将容器设置为overflow:visible，但插入

<div class="clearfix" />

包含Dropdown的块下面的

解决了我的问题。

Answer 16

只需将溢出值更改为visible。

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

16 个答案:

Ng Bootstrap> = 4.1.0（Angular Powered Bootstrap）解决方案：