处理twitter引导下拉剪辑问题在容器上有自动溢出 [英] Handle twitter bootstrap dropdown clipped issue having overflow auto on container
问题描述
Bootstrap下拉菜单正在剪辑，我查看以下问题中提到的所有选项，但没有工作。
我想要什么：
：
提前感谢
问题
我使用Bootstrap 3和具有溢出自动的div容器相同的问题。
$ b
解决方案是设置位置：固定到下拉列表，然后点击计算jQuery的坐标。坐标是用offset（）计算的，所以它相对于文档窗口而不是元素parent。
这个解决方案也可以用于overflow：hidden containers。
CSS
.somecontainer下载菜单{
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 ;
}）;
Bootstrap dropdown is getting clipped, i looked at all option mentioned in following questions but did not work.
Bootstrap drop down cutting off
Twitter Bootstrap Button dropdown z-index layering issue
z-index issue with twitter bootstrap dropdown menu
Requirements
- I want scrolling in main div
- I want bootstrap dropdown to not get clipped
- Height width of the div and dropdown should not be changed
Plunker: 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>
With problem:
What do i want:
Thanks in advance
Problem
I use Bootstrap 3 and had the same problem with a div container with overflow auto. It contains a dropdown that must pop out from the container.
Solution
The solution is to set position:fixed to the dropdown and then calculate coordinates with jQuery on click. Coordinates is calculated with offset() so its relative to document window instead of elements parent.
This solution probably also works for overflow:hidden containers.
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 add this to hide dropdown on window resize:
$( window ).resize(function() {
$('.somecontainer .dropdown-menu').parent().removeClass('open');
});
这篇关于处理twitter引导下拉剪辑问题在容器上有自动溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
