在 bootstrap table 问题中打开 bootstrap select

Question

问题

我正在使用 bootstrap-table plugin and the bootstrap-select 插件，两者都非常好用。
但是当我使用 bootstrap-select inside a bootstrap-table 时出现问题。如果最后一行的 select 框打开，table 大小会改变，而不是 select 框会 "over" 到 table 区域，创建一个滚动区域，我不喜欢。

如下图所示：

我尝试使用下面的 javascript 代码来 "fix" 这种效果，但没有成功。代码已执行，但问题仍然存在。我没有看到哪个 css 对此行为负责，非常感谢任何帮助。

$('.table-responsive').on('show.bs.select', function () { 
  console.log("triggered show bs select");
  $('.table-responsive').css( "overflow", "hidden" ); 
}); 
$('.table-responsive').on('hide.bs.select', function () { 
  console.log("triggered hide bs select");
  $('.table-responsive').css( "overflow", "auto" ); 
})

例子

行为可见于：
Jsfiddle:http://jsfiddle.net/e3nk137y/8612/

编辑

我现在可以使用它，但只能在 table 上应用 padding-bottom 并使用以下 js 代码：

$('.table-responsive').on('show.bs.select', function () { 
      $('.table-responsive').css( "overflow", "inherit" );
      $('.bootstrap-table').css( "overflow", "inherit" ); 
      $('.fixed-table-body').css( "overflow", "inherit" );     
 });

我暂时保留这个问题，因为我认为这不是 "nice" 修复，尤其是再次 "hide" select 框所需的添加填充。

Answer 1

class .fixed-table-body 似乎是造成这种情况的原因。删除 overflow-x: auto; 和 overflow-x: auto; 可解决您的问题。

Answer 2

您可以添加选项container: 'body'。这会将下拉菜单放在 table 之外，从而避免出现此问题。如果 body 有问题，只需使用任何包含 table 的元素，该元素大到足以包含下拉菜单。

Jsfiddle

Answer 3

class .table-responsive 似乎是造成这种情况的原因。删除 overflow-x: auto;解决你的问题。您可以在 bootstrap.css

中找到样式

在 bootstrap table 问题中打开 bootstrap select

Opening bootstrap select in bootstrap table issue

javascript

html

bootstrap-table

bootstrap-select

问题

例子

编辑