Twitter bootstrap 自举'；数据表隐藏的下拉列表

我使用TwitterBootstrap为DataTables网格中的每一行创建一个带有下拉菜单的按钮，但是DataTables中的数据容器使用了“overflow:hidden”，这使得下拉菜单被剪切

我不能仅仅切换到“溢出：自动”，因为这将导致出现不必要的垂直滚动条

这是一个

HTML

JS

获取分页信息的API方法*/ $.fn.dataTableExt.oApi.fnPagingInfo=函数（oSettings）{ 返回{ “iStart”：oSettings._i显示开始， “iEnd”：oSettings.fnDisplayEnd（）， “i长度”：o设置。i显示长度， “iTotal”：oSettings.fnRecordsTotal（）， “iFilteredTotal”：oSettings.fnRecordsDisplay（）， “iPage”：oSettings.\u iDisplayLength==-1？0:Math.ceil（oSettings.\u iDisplayStart/oSettings.\u iDisplayLength）， “iTotalPages”：oSettings.\u iDisplayLength==-1？0:Math.ceil（oSettings.fnRecordsDisplay（）/oSettings.\u iDisplayLength） }; } /*引导式分页控件*/ $.extend（$.fn.dataTableExt.oPagination{ “引导”：{ “fnInit”：函数（oSettings、nPaging、fnDraw）{ var oLang=oSettings.olalanguage.oPaginate； var fnClickHandler=函数（e）{ e、 预防默认值（）； if（oSettings.oApi.\u fnPageChange（oSettings，e.data.action））{ fnDraw（oSettings）； } }; $（nPaging）.addClass（'pagination'）.append( “

”+ “
”+ “
”+ “

”）； 变量els=$（'a'，nPaging）； $（els[0]）.bind（'click.DT'{ 行动：“以前的” }，fnClickHandler）； $（els[1]）.bind（'click.DT'{ 行动：“下一步” }，fnClickHandler）； }, “FNDUpdate”：功能（oSettings，fnDraw）{ 可变长度=5； var oPaging=oSettings.oInstance.fnPagingInfo（）； var an=oSettings.aanFeatures.p； 变量i、j、sClass、iStart、iEnd、iHalf=数学楼层（iListLength/2）； if（oPaging.iTotalPages对于（j=iStart；j好的，在我们的评论之后，我意识到你想要什么：

您有一个

元素带有

溢出：auto

，并且您希望该

元素（菜单所在的

）中的一个元素从溢出规则中“转义”，并显示为浮动，从其祖先覆盖溢出规则。

但恐怕这是不可能的。你能做的最接近的事情是：

• 使用javascript创建
  ，使用

  溢出：auto

  的
  之外的菜单，然后使用position absolute将其设置在应该放置的位置，或者
• 一旦下拉菜单激活，使用javascript在底部自动滚动，方法是在最后一个下拉菜单中添加事件侦听器之类的内容

---

第二个选项看起来更优雅，不那么“黑”（我个人会忽略这个问题，但如果我必须选择，我会选择第二个选项）

覆盖.dataTables\u滚动头选择器的DataTable css规则对我有效

.dataTables_scrollHead{
    position: static !important;
}

---

我也遇到了同样的问题！解决了在component.css中删除溢出属性的问题

.table-scrollable {
  width: 100%;
/*  overflow-x: auto;
  overflow-y: hidden;*/
  border: 1px solid #dddddd;
  margin: 10px 0 !important;
}

或者添加到custom.css（在引导后调用）

---

这对我很有用：Datatable+固定标题+标题中的引导下拉列表

.dataTables_scrollHead{
    overflow: visible !important;
}

---

在所有其他css之后添加到自定义css中

对我有效的是将引导下拉菜单的位置调整为

固定

，并将菜单移动到屏幕的特定部分

它与移动视图一起工作，因为它是相对于窗口的

table.下拉菜单{
位置：固定！重要；
前50%！重要；
左：92%！重要；
转换：翻译（-92%，-50%）！重要；
}

这样，您就可以保持

数据表

的

滚动条

扩展、

滚动条

和

滚动条

属性的行为

---

我不确定我是否想理解你，但我想我没有这样的问题：这是你的意思吗？@chris点击最后一行的按钮。好的，像这样：（顺便说一句，我没有改变你小提琴上的任何东西）下面是如果我不使用内部滚动条向下移动时会发生的情况：。问题是，即使有3行数据和大量空间可供使用，DataTables也定义了一个固定的高度，这会导致不必要的滚动条。像这样使用

overflow:visible；

怎么样？我解决了禁用DataTables的滚动选项的问题，但您的建议会有帮助帮帮我。我写了两个建议的例子：-移到外面：-滚动：@Marc:这真是个好建议，但我发现它在Safari最新浏览器上运行得并不完美。当第一次加载页面时，它会完美地弹出，然后单击下一次，菜单的左上方会发生变化。我想下一次男人的位置会发生变化u=菜单的最后一个顶部+高度…@Marc，你应该把它写下来作为答案，因为它很好用。只有一件事要提醒未来的访客——这里有一个骗局

.table-scrollable {
  width: 100%;
/*  overflow-x: auto;
  overflow-y: hidden;*/
  border: 1px solid #dddddd;
  margin: 10px 0 !important;
}

.table-scrollable { 
    overflow-x: visible; 
    overflow-y: visible; 
}

.dataTables_scrollHead{
    overflow: visible !important;
}