Question

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

要求

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

Plunker： http://plnkr.co/edit/HOKKYJ?p=preview

＆＃13;

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

＆＃13;

有问题：

我想要什么：

提前致谢

Answer 1

<强>问题

我使用Bootstrap 3并且在具有溢出auto的div容器中遇到了同样的问题。它包含一个必须从容器中弹出的下拉列表。

<强>解决方案

解决方案是设置位置：固定到下拉列表，然后点击jQuery计算坐标。坐标是使用offset（）计算的，因此它相对于文档窗口而不是父元素。

此解决方案可能也适用于溢出：隐藏容器。

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');
});

Answer 2

实际上这与下拉列表无关。 CSS逻辑 - 你不能在固定高度的div（overflow：auto）内部没有裁剪的绝对元素。

解决方案有点乱，但你需要在滚动容器外面附加下拉div并将其与触发链接对齐。

Answer 3

嗨，很高兴给出这个答案，因为我试图为此付出努力

bdw我同意Chetan你需要从主要div中删除div

虽然我对角度知之甚少，所以我不能说你的局限是什么

虽然我设法以我的方式工作

 <body style="height:100%;" ng-app="myApp">
        <div class="main-div">
                <div ng-repeat="num in [1,2,3,4,5]">
                    <div class="repeated-div">
                        <div class="grouped-dd">
                            <button class="dropdown-toggle" data-toggle="dropdown">Click me Brother...!!</button>
                            <div class="dropdown-menu temp">
                                <div class='no-wrap-text-div' title="I am a text......................................!!">I am a text......................................!!</div>
                                <div class='no-wrap-text-div' title="I am a also text.................................!!" >I am a also text.................................!!</div>
                                <div class='no-wrap-text-div' title="Another text........................................................................................!!">Another text........................................................................................!!</div>
                                <div class='no-wrap-text-div' title="One more text.............................!!">One more text.............................!!</div>
                                <div class='no-wrap-text-div' title="Aha one more text...........................................................................!!">Aha one more text...........................................................................!!</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </body>

CSS

 .temp {
            max-width: 43px;
            min-width: 142px;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .no-wrap-text-div{
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            max-width: 160px;
        }

<强> my tried Demo

请注意 ：虽然一个很薄，但你需要给出所有div的标题   动态，如果你将包含在动态环境中那么。

另一件事我覆盖了引导程序的最小宽度   dropmenu的宽度为160 px到142 px，这是不可取的   我的建议也是

处理twitter引导下拉截断的问题，容器上有溢出自动

3 个答案: