在引导表问题中打开引导选择

Posted 2023-05-08

技术标签:

【中文标题】在引导表问题中打开引导选择【英文标题】：Opening bootstrap select in bootstrap table issue 【发布时间】：2017-01-26 23:48:44 【问题描述】：

问题

我正在使用bootstrap-table 插件和bootstrap-select 插件，它们都非常好用。但是当我在引导表中使用引导选择 inside 时出现问题。如果最后一行的选择框打开，表格大小会发生变化，而不是选择框“越过”表格区域，从而创建一个我不喜欢的滚动区域。

如下图所示：

我尝试使用以下 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" );     
 );

我暂时保留这个问题，因为我认为这不是一个“好的”修复，尤其是再次“隐藏”选择框所需的添加填充。

【问题讨论】：

【参考方案1】：

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

Jsfiddle

【讨论】：

像使用它一样这才是真正的答案【参考方案2】：

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

【讨论】：

谢谢，确实是这些，但在我的情况下需要更多才能使其完全工作。如果没有更好/更好的解决方案出现，我会接受这个作为答案。【参考方案3】：

类 .table-responsive 似乎是造成这种情况的原因。删除溢出-x：自动；解决您的问题。您可以在 bootstrap.css 中找到样式

【讨论】：