Opening bootstrap in the boot log

Question

Problem

I use the bootstrap-table plugin, and bootstrap-select , which are both very nice.
But I get the problem when I use bootstrap-select inside the initial table. If the last row selection window opens, the size of the table is changed instead of having selectbox go “over” the area of ​​the table, creating a scroll area that I don't like.

As in the image below:

I tried to "fix" this effect using the javascript code below, but to no avail. The code runs, but the problem still exists. I don't see which css is responsible for this behavior, and any help is 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

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

---

Edit

Now I work, but only using padding-bottom in 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, as this is not a “good” fix in my opposition, especially the added add-on, which is necessary to “hide” the selection window.

Answer 1

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

Jsfiddle

Answer 2

It seems that the .fixed-table-body class calls this. Removing overflow-x: auto; and overflow-x: auto; fixes your problem.

Answer 3

This seems to call the .table revocation class. Removing overflow-x: auto; fixes your problem. You can find the style in bootstrap.css