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

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

Bootstrap下拉切断

Twitter Bootstrap Button下拉z-index分层问题

Twitter bootstrap下拉菜单中的z-index问题

要求

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

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

            angular.module("myApp", []).controller("MainCtrl", function($scope) { });    
 
 
 
 Click me Brother...!! 
 
I am a text......................................!!
 
I am a also text.................................!!
 
Another text........................................................................................!!
 
One more text.............................!!
 
Aha one more text...........................................................................!!
 
 
 
 
 
   

有问题：

我想要什么：

提前致谢

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

Optionaly添加此项以隐藏窗口resize的下拉列表：

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

Answer 2

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

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

Answer 3

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

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

虽然我不太了解角度所以我不能说你的局限是什么

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

   
 
 
 
 Click me Brother...!! 
 
I am a text......................................!!
 
I am a also text.................................!!
 
Another text........................................................................................!!
 
One more text.............................!!
 
Aha one more text...........................................................................!!