Datatables - scroll issue only in IE9

I've managed to fix the issue, after a lot of searching and patience.

The issue was Bootstrap related. Well, not Bootstrap exactly, but what Bootstrap.css does is add a max-width: 100%; to every table. Which is great for general layout, but apparently IE9 can't combine that with a scrollable overflow-x setup. IE9 doesn't really like max- and min- heights and widths from my experience.

But I still want to thank all of you for your efforts, you put me on the right road to find the root cause of this issue!


Add this, in demo_table_jui.css at line 117 (below .dataTables_wrapper):

.DTFC_ScrollWrapper {
    overflow: hidden;
    overflow-x: scroll;
}

This does the trick (at least, over here it does, in all browsers including both IE7 & IE8 document mode in IE9).

working horizontalscroll (no vertical scrollbar), header with searchbox stays in view

Edited: the overflow code should not be added to .dataTables_wrapper as I suggested earlier in this answer, but the class .DTFC ScrollWrapper should be specified with overflowing instead, see above code.


btw, totally irrelevant: this company always reminds me of 'De Bende van Nijvel', don't ask me why ;)