在bootstrap表问题中打开bootstrap select

Question

问题

我正在使用bootstrap-table插件和bootstrap-select插件,它们都非常好用.
但是当我在 bootstrap-table中使用bootstrap-select时,我遇到了一个问题.如果最后一行的选择框打开,则表格大小会改变,而不是选择框"覆盖"表区域,从而创建一个我不喜欢的滚动区域.

如下图所示:

我试图使用下面的javascript代码"修复"此效果,但无济于事.代码被执行但问题仍然存在.我没有看到哪个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/

---

编辑

我现在有它工作,但只有在桌子上应用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" );     
 }); 

我现在暂时打开这个问题,因为在我的意见中这不是一个"好的"修复,特别是需要再次"隐藏"选择框所需的填充.

Answer 1

您可以添加该选项container: 'body'.这会将下拉列表放在桌子外面并防止出现问题.如果出现问题body,只需使用包含表格的任何元素,该表格足够大,可以包含下拉菜单.

的jsfiddle