jquery - 处理 Twitter Bootstrap 下拉列表在容器上自动溢出的问题

Bootstrap 下拉菜单被剪裁，我查看了以下问题中提到的所有选项，但没有用。

要求

我想在主 div 中滚动
我希望 bootstrap 下拉列表不被剪裁
div 和下拉列表的高度宽度不应更改

笨蛋: http://plnkr.co/edit/HOKKYJ?p=preview

<!DOCTYPE html>
<html>

  <head>
    <title>Clipping problem</title>
        <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" />
        <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
        <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script data-require="bootstrap@*" data-semver="3.3.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
     <script>
            angular.module("myApp", []).controller("MainCtrl", function($scope) {
            });
        </script>
  </head>

 <body style="height:100%;" ng-app="myApp">
        <div style="background: indianred; position: relative; left:40%; height: 200px; width: 250px; overflow-y: auto;">
                <div ng-repeat="num in [1,2,3,4,5]">
                    <div style="background: bisque; margin:5px; height: 50px;">
                        <div style="position: relative; float: right">
                            <button class="dropdown-toggle" data-toggle="dropdown">Click me Brother...!!</button>
                            <div class="dropdown-menu">
                                <div style="text-wrap: none; white-space: nowrap;">I am a text......................................!!</div>
                                <div style="text-wrap: none;white-space: nowrap;">I am a also text.................................!!</div>
                                <div style="text-wrap: none;white-space: nowrap;">Another text........................................................................................!!</div>
                                <div style="text-wrap: none;white-space: nowrap;">One more text.............................!!</div>
                                <div style="text-wrap: none;white-space: nowrap;">Aha one more text...........................................................................!!</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </body>

</html>

有问题:

我想要什么:

提前致谢

最佳答案

问题

我使用的是 Bootstrap 3，在使用自动溢出的 div 容器时遇到了同样的问题。它包含一个必须从容器中弹出的下拉菜单。

解决方案

解决方案是设置 position:fixed 到下拉菜单，然后在点击时使用 jQuery 计算坐标。坐标是用 offset() 计算的，因此它是相对于文档窗口而不是父元素的。

这个解决方案可能也适用于 overflow:hidden 容器。

CSS

.somecontainer .dropdown-menu {
    position:fixed;
}

jQuery

$(".somecontainer .dropdown").on('click', function() {
    $(this).find('.dropdown-menu').css('top',$(this).offset().top);
    $(this).find('.dropdown-menu').css('left',$(this).offset().left);
});

可选地添加这个以隐藏窗口调整大小的下拉列表:

$( window ).resize(function() {         
    $('.somecontainer .dropdown-menu').parent().removeClass('open');
});

关于jquery - 处理 Twitter Bootstrap 下拉列表在容器上自动溢出的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32381746/

jquery - 处理 Twitter Bootstrap 下拉列表在容器上自动溢出的问题

上一篇：css - AngularUI Bootstrap Popover 闪烁

下一篇：css - 没有属性的 CSS 选择器有什么影响吗？