使用自举,我有一个下拉菜单(小号内)div用overflow:hidden,这是需要这样.这导致下拉列表被容器剪切.
我的问题是,如何解决这个剪切问题,例如body,以尽可能低的成本更改项目中所有下拉列表的容器？
这是代码的一个例子:http: //jsfiddle.net/0y3rk8xz/
我已经看到下拉菜单的文档作为组件并单独使用javascript.
我想知道是否可以在网站的正文中添加一个下拉菜单(相对于可点击按钮元素的绝对位置).
为什么？
因为如果我有一个包含500行的表,我不想添加相同的10个项目列表500次,这使得处理JS时生成的HTML变得更大更慢.
因为父元素可以被隐藏,但我仍然希望下拉菜单可见,直到它们点击外面它没有聚焦它.
我找到了更多人要求这个功能,但我在文档中找不到任何关于它的内容.
Bootstrap下拉列表正在被修剪,我查看了以下问题中提到的所有选项,但没有奏效.
Twitter Bootstrap Button下拉z-index分层问题
Twitter bootstrap下拉菜单中的z-index问题
要求
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; …我有类似的问题本.但那里的解决方案对我的问题不起作用.该讨论已经结束,以获得进一步的建议.不幸的是,我无法完全按照jsfiddle显示我的代码.但问题是这样的.当尝试扩展第一个面板部分内的下拉列表时,隐藏在其他元素后面的下拉列表.我花了好几个小时尝试关于"堆叠上下文","位置"和"z-index"的不同建议.如果有人能指出任何有用的资源,我真的很感激.
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span data-bind="label">Select One</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Item 1</a>
</li>
<li><a href="#">Another item</a>
</li>
<li><a href="#">This is a longer item that will not fit properly</a>
</li>
</ul>
</div>
我正在尝试使用下拉菜单与可折叠面板组一起使用.如果我把它从.panel-groupdiv中取出,那么下拉列表工作正常.我正在使用Bootstrap 3.0.3
非工作js小提琴:http: //jsfiddle.net/E2rqA/
它应该是这样的:http: //jsfiddle.net/ShCaf/