Bas van Stein Bas van Stein - 2 months ago 20
HTML Question

Opening bootstrap select in bootstrap table issue

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:
enter image description here

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.

Answer

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

Comments