Horizontal scroll with Bootstrap causing problem

DustinK

I am having an issue when using Bootstrap integration and scrollX: true.

In this first JSFiddle http://jsfiddle.net/cmxynxL8/8/ I am not using Bootstrap. First you will want to turn off all columns except for maybe two. Then run the fiddle again so the columns resize. You will notice that there is no horizontal scroll bar at the bottom and no horizontal movement. This is how I want it to work.

In the second JSFiddle http://jsfiddle.net/cmxynxL8/7/ I am using Bootstrap. If you again turn off enough columns so that there should be no horizontal scrolling and then run the fiddle again, you will notice that there is still horizontal scroll bar at the bottom and a small amount of side to side scroll.

When all columns should fit on the screen I do not want there to be any side to side movement. It's not much but it's enough to be annoying as it can cover up a few letters of the first column.

DustinK

After messing around with this for a few hours I think I have found a solution. I don't know if I will have any problems that come from this but so far it seems solid.

If I change the table width from 100% to 99.9% the issue seems to go away and the width is acceptable.

I did still have an issue where the table width was not recalculated after doing a search that would limit the table to so few rows that the vertical scrollbar was not displayed. This would leave a little too much space on the side of the table where the scrollbar had been. Refreshing the page would resize the table but if you then removed your search term and the vertical scrollbar came back, the table was again too big and the initial problem of the horizontal scrollbar came back.

Of course refreshing the page or adjusting the browser window would force the table to recalculate but that was not ideal. What seems to work for this is to fire columns.adjust() after the table is redrawn by the search by adding this.

    $('table').on( 'draw.dt', function () {
        table.columns.adjust();
    }); 

to call table.columns.adjust() I of course initialized the datatable like so.

table = $('table').DataTable()