Opening bootstrap select in bootstrap table issue

Question

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.

score 15 · Accepted Answer · answered Sep 19 '16 at 13:26

15

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

answered Sep 19 '16 at 13:26

Teoulas

2,943
22
27

3

use it like – M.Ali El-Sayed Mar 18 '18 at 09:55
1

That is real answer – Matas Lesinskas Sep 27 '18 at 10:29

score 2 · Answer 2 · answered Sep 19 '16 at 10:27

2

The class .fixed-table-body seems to be causing this. Removing overflow-x: auto; and overflow-x: auto; fixes your issue.

answered Sep 19 '16 at 10:27

Chris Satchell

751
5
17

Thank you, it is indeed those but a bit more in my case was needed to make it work completely. If no better / nicer solution shows up I will accept this as answer. – Niki van Stein Sep 19 '16 at 13:18

score 0 · Answer 3 · answered Dec 22 '17 at 06:21

0

The class .table-responsive seems to be causing this. Removing overflow-x: auto; fixes your issue. You can find the style in bootstrap.css

answered Dec 22 '17 at 06:21

Muhammed Fayaz

45
1
14

Comments should not be in answer section – Mathews Sunny Dec 22 '17 at 06:47

Opening bootstrap select in bootstrap table issue

The Problem

Example

Edit

3 Answers3

Linked