Bootstrap按钮下拉菜单 - 创建溢出
我正在尝试创建一个＆＃34; Actions＆＃34;下拉表格的最后一列，但是当您点击下拉列表时出现溢出。 （见附页截图）
我的HTML结构如下：
<table id="app_progress" class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>In Build</th>
<th>Signed off</th>
<th>In deployment Apple</th>
<th>In deployment Android</th>
<th>In review Apple</th>
<th>In review Android</th>
<th>Live Apple</th>
<th>Live Android</th>
<th>Paid</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<!--for loop here that will create a TR all content in the TD based on whats passed in.-->
<tr>
<!--td>523</td-->
<td><a href="#" class="view-form-a">Primary</a></td>
<!-- in_build column -->
<td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>
<!-- signed_off column -->
<td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>
<!-- in_deployment_apple column -->
<td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>
<!-- in_deployment_android column -->
<td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>
<!-- in_review_apple column -->
<td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>
<!-- in_review_android column -->
<td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>
<!-- live_apple column -->
<td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>
<!-- live_android column -->
<td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>
<!-- paid column -->
<td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>
<!-- view app column -->
<td>
<div class="btn-group open">
<button aria-expanded="true" data-toggle="dropdown" class="btn btn-sm btn-default dropdown-toggle" type="button">
Action <span class="caret"></span>
</button>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</td>
</tr>
<!--End of If statement-->
<tr>
<!--td>99786</td-->
<td><a href="#" class="view-form-a">Primary School</a></td>
<!-- in_build column -->
<td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>
<!-- signed_off column -->
<td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>
<!-- in_deployment_apple column -->
<td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>
<!-- in_deployment_android column -->
<td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>
<!-- in_review_apple column -->
<td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>
<!-- in_review_android column -->
<td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>
<!-- live_apple column -->
<td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>
<!-- live_android column -->
<td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>
<!-- paid column -->
<td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>
<!-- view app column -->
<td>
<div class="btn-group">
<button aria-expanded="false" data-toggle="dropdown" class="btn btn-sm btn-default dropdown-toggle" type="button">
Action <span class="caret"></span>
</button>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</td>
</tr>
<!--End of If statement-->
<!--everything goes within the loop-->
</tbody>
</table>
如何摆脱溢出？
由于
2 个答案:
答案 0 :(得分：2)
将dropdown-menu-right课程添加到ul.dropdown-menu，它会对齐按钮的右侧，因此向左展开。
答案 1 :(得分：1)
＆＃13;
＆＃13;
＆＃13;
＆＃13;
$('.mydropdown').on('shown.bs.dropdown', function(e) {
var myBtn = $(this);
var offset_t = $(this).offset().top - $(window).scrollTop();
var offset_l = $(this).offset().left - $(window).scrollLeft();
console.log(offset_l, offset_t);
myBtn.find(".dropdown-menu").css({
"position": "fixed",
"left": offset_l,
"top": offset_t + myBtn.height()
});
});
$('.mydropdown').on('hidden.bs.dropdown', function() {
var myBtn = $(this);
myBtn.find(".dropdown-menu").removeAttr("style");
});
$("#wrap").on("scroll", function(e) {
var myBtn = $('.mydropdown.open');
var offset_t = $(myBtn).offset().top - $(window).scrollTop();
var offset_l = $(myBtn).offset().left - $(window).scrollLeft();
myBtn.find(".dropdown-menu").css({
"position": "fixed",
"left": offset_l,
"top": offset_t + myBtn.height()
});
});<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div style="width:850px; overflow: scroll;height:450px;" id="wrap">
<table class="table table-striped table-bordered table-hover" id="example" ccellpadding="0" cellspacing="0" border="0" width="100%">
<thead>
<tr>
<th>Head1</th>
<th>Head2</th>
<th>Head3</th>
<th>Head4</th>
<th>Head5</th>
<th>Head6</th>
<th>Head7</th>
<th>Head8</th>
</tr>
</thead>
<tbody>
<tr height="48px">
<td>1</td>
<td>Gabriel</td>
<td>Some value is here</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>
<div class="btn-group mydropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="link/1" title="View SPK">
<span class="glyphicon glyphicon-check"></span> View SPK</a>
</li>
<li>
<a href="link/1" title="Edit SPK">
<span class="glyphicon glyphicon-edit"></span> Edit SPK</a>
</li>
</ul>
</div>
</td>
</tr>
<tr height="48px">
<td>1</td>
<td>Gabriel</td>
<td>Some value is here</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>
<div class="btn-group mydropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="link/1" title="View SPK">
<span class="glyphicon glyphicon-check"></span> View SPK</a>
</li>
<li>
<a href="link/1" title="Edit SPK">
<span class="glyphicon glyphicon-edit"></span> Edit SPK</a>
</li>
</ul>
</div>
</td>
</tr>
<tr height="48px">
<td>1</td>
<td>Gabriel</td>
<td>Some value is here</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>
<div class="btn-group mydropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="link/1" title="View SPK">
<span class="glyphicon glyphicon-check"></span> View SPK</a>
</li>
<li>
<a href="link/1" title="Edit SPK">
<span class="glyphicon glyphicon-edit"></span> Edit SPK</a>
</li>
</ul>
</div>
</td>
</tr>
<tr height="48px">
<td>1</td>
<td>Gabriel</td>
<td>Some value is here</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>
<div class="btn-group mydropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="link/1" title="View SPK">
<span class="glyphicon glyphicon-check"></span> View SPK</a>
</li>
<li>
<a href="link/1" title="Edit SPK">
<span class="glyphicon glyphicon-edit"></span> Edit SPK</a>
</li>
</ul>
</div>
</td>
</tr>
<tr height="48px">
<td>1</td>
<td>Gabriel</td>
<td>Some value is here</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>
<div class="btn-group mydropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="link/1" title="View SPK">
<span class="glyphicon glyphicon-check"></span> View SPK</a>
</li>
<li>
<a href="link/1" title="Edit SPK">
<span class="glyphicon glyphicon-edit"></span> Edit SPK</a>
</li>
</ul>
</div>
</td>
</tr>
<tr height="48px">
<td>1</td>
<td>Gabriel</td>
<td>Some value is here</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>
<div class="btn-group mydropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="link/1" title="View SPK">
<span class="glyphicon glyphicon-check"></span> View SPK</a>
</li>
<li>
<a href="link/1" title="Edit SPK">
<span class="glyphicon glyphicon-edit"></span> Edit SPK</a>
</li>
</ul>
</div>
</td>
</tr>
<tr height="48px">
<td>1</td>
<td>Gabriel</td>
<td>Some value is here</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>
<div class="btn-group mydropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="link/1" title="View SPK">
<span class="glyphicon glyphicon-check"></span> View SPK</a>
</li>
<li>
<a href="link/1" title="Edit SPK">
<span class="glyphicon glyphicon-edit"></span> Edit SPK</a>
</li>
</ul>
</div>
</td>
</tr>
<tr height="48px">
<td>1</td>
<td>Gabriel</td>
<td>Some value is here</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>
<div class="btn-group mydropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="link/1" title="View SPK">
<span class="glyphicon glyphicon-check"></span> View SPK</a>
</li>
<li>
<a href="link/1" title="Edit SPK">
<span class="glyphicon glyphicon-edit"></span> Edit SPK</a>
</li>
</ul>
</div>
</td>
</tr>
<tr height="48px">
<td>1</td>
<td>Gabriel</td>
<td>Some value is here</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>
<div class="btn-group mydropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="link/1" title="View SPK">
<span class="glyphicon glyphicon-check"></span> View SPK</a>
</li>
<li>
<a href="link/1" title="Edit SPK">
<span class="glyphicon glyphicon-edit"></span> Edit SPK</a>
</li>
</ul>
</div>
</td>
</tr>
<tr height="48px">
<td>1</td>
<td>Gabriel</td>
<td>Some value is here</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>
<div class="btn-group mydropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="link/1" title="View SPK">
<span class="glyphicon glyphicon-check"></span> View SPK</a>
</li>
<li>
<a href="link/1" title="Edit SPK">
<span class="glyphicon glyphicon-edit"></span> Edit SPK</a>
</li>
</ul>
</div>
</td>
</tr>
<tr height="48px">
<td>1</td>
<td>Gabriel</td>
<td>Some value is here</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>
<div class="btn-group mydropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="link/1" title="View SPK">
<span class="glyphicon glyphicon-check"></span> View SPK</a>
</li>
<li>
<a href="link/1" title="Edit SPK">
<span class="glyphicon glyphicon-edit"></span> Edit SPK</a>
</li>
</ul>
</div>
</td>
</tr>
<tr height="48px">
<td>1</td>
<td>Gabriel</td>
<td>Some value is here</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>
<div class="btn-group mydropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="link/1" title="View SPK">
<span class="glyphicon glyphicon-check"></span> View SPK</a>
</li>
<li>
<a href="link/1" title="Edit SPK">
<span class="glyphicon glyphicon-edit"></span> Edit SPK</a>
</li>
</ul>
</div>
</td>
</tr>
<tr height="48px">
<td>1</td>
<td>Gabriel</td>
<td>Some value is here</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>
<div class="btn-group mydropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="link/1" title="View SPK">
<span class="glyphicon glyphicon-check"></span> View SPK</a>
</li>
<li>
<a href="link/1" title="Edit SPK">
<span class="glyphicon glyphicon-edit"></span> Edit SPK</a>
</li>
</ul>
</div>
</td>
</tr>
<tr height="48px">
<td>1</td>
<td>Gabriel</td>
<td>Some value is here</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>
<div class="btn-group mydropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="link/1" title="View SPK">
<span class="glyphicon glyphicon-check"></span> View SPK</a>
</li>
<li>
<a href="link/1" title="Edit SPK">
<span class="glyphicon glyphicon-edit"></span> Edit SPK</a>
</li>
</ul>
</div>
</td>
</tr>
<tr height="48px">
<td>1</td>
<td>Gabriel</td>
<td>Some value is here</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>
<div class="btn-group mydropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="link/1" title="View SPK">
<span class="glyphicon glyphicon-check"></span> View SPK</a>
</li>
<li>
<a href="link/1" title="Edit SPK">
<span class="glyphicon glyphicon-edit"></span> Edit SPK</a>
</li>
</ul>
</div>
</td>
</tr>
<tr height="48px">
<td>1</td>
<td>Gabriel</td>
<td>Some value is here</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>
<div class="btn-group mydropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="link/1" title="View SPK">
<span class="glyphicon glyphicon-check"></span> View SPK</a>
</li>
<li>
<a href="link/1" title="Edit SPK">
<span class="glyphicon glyphicon-edit"></span> Edit SPK</a>
</li>
</ul>
</div>
</td>
</tr>
<tr height="48px">
<td>1</td>
<td>Gabriel</td>
<td>Some value is here</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>
<div class="btn-group mydropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="link/1" title="View SPK">
<span class="glyphicon glyphicon-check"></span> View SPK</a>
</li>
<li>
<a href="link/1" title="Edit SPK">
<span class="glyphicon glyphicon-edit"></span> Edit SPK</a>
</li>
</ul>
</div>
</td>
</tr>
<tr height="48px">
<td>1</td>
<td>Gabriel</td>
<td>Some value is here</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>
<div class="btn-group mydropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="link/1" title="View SPK">
<span class="glyphicon glyphicon-check"></span> View SPK</a>
</li>
<li>
<a href="link/1" title="Edit SPK">
<span class="glyphicon glyphicon-edit"></span> Edit SPK</a>
</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
溢出：滚动 - 剪辑溢出，但添加了滚动条以查看其余内容。
如果你需要溢出：滚动必须。 你已经使用jquery将位置固定到下拉菜单。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？