在bootstrap表问题中打开bootstrap select [英] Opening bootstrap select in bootstrap table issue

问题描述

问题

我正在使用

我试图修复此效果使用下面的javascript代码，但无济于事。代码被执行但问题仍然存在。我没有看到哪个css对此行为负责，并且非常感谢任何帮助。

  $（'。table-responsive' ）.on（'show.bs.select'，function（）{
 console.log（triggered show bs select）; 
 $（'。table-responsive'）。css（overflow ，隐藏）; 
}）; 
 $（'。table-responsive'）。on（'hide.bs.select'，function（）{
 console.log（triggered hide bs select）; 
 $（ '.table-responsive'）。css（溢出，自动）; 
}）
  

示例

行为可见于：

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）; 
}）; 
  

我现在暂时打开这个问题，因为这不是我的意见中的好修复，尤其是添加的填充是再次隐藏选择框所需的填充。

解决方案

您可以添加选项容器：'body'。这会将下拉列表放在桌子外面并防止出现问题。如果 body 出现问题，只需使用包含该表的任何元素，该元素足以包含下拉菜单。

Jsfiddle

The Problem

I am using the bootstrap-table plugin and the bootstrap-select plugin, which both work very nice.
But I get an issue when I use the bootstrap-select inside a bootstrap-table. If the select box of the last row opens, the table size changes instead of the selectbox going "over" the table area creating a scroll area which I do not like.

Like in the image below:

I have tried to "fix" this effect using the below javascript code, but to no avail. The code gets executed but the problem is still there. I do not see which css is responsible for this behaviour and any help is highly appreciated.

$('.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" ); 
})

Example

The behaviour can be seen in:
Jsfiddle:http://jsfiddle.net/e3nk137y/8612/

---

Edit

I have it working now but only with applying padding-bottom on the table and using the following js code:

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

I leave the question open for now since this is not a "nice" fix in my oppinion, especially the added padding which is needed to "hide" the select box again.

解决方案

You can add the option container: 'body'. This will place the drop-down outside the table and will prevent the issue. If there's a problem with body, just use any element that contains the table, which is large enough to contain the drop-down menu.

Jsfiddle

这篇关于在bootstrap表问题中打开bootstrap select的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！