Datatables - scroll issue only in IE9

Question

I have a problem with Datatables that does not properly use x-axis scrolling.

Previously, I had to deal with the IE9 "ghost cell" problem, which I was able to fix. However, now I am encountering a problem when my overflow-x is displayed, rather than hiding it and making a scrollable window.

My initialization of datatables:

var oTable = $('#tableBP').dataTable({ "bJQueryUI": true, "sScrollX": "100%", "sScrollXInner": "200%", "sScrollY": 300, "bScrollCollapse": false, "bFilter": true, "bSort": false, "bInfo": false, "bPaginate": false }); //This is a Datatables plugin. The issue occurs whether I comment this part or not. new FixedColumns(oTable, { "iLeftWidth": 225 }); 

This is what I came across:

However, it works in IE9 compatibility mode. Unfortunately, other parts of the page do not allow me to work, this is lower version compatibility, but this clearly marks it as an IE9 problem. No problem in Chrome, Safari, Opera, Firefox.

I am not going to publish the table here because of its sheer size (2000+ td fields in some cases). This is an absolutely correct HTML table with a tag / body, and all spaces between tags are removed (this is what is fixed by my previous ghost cell issue).

Does anyone have experience with Datatables and know the root cause of this problem?

PS: this is an MVC2 application (C # .Net), but this problem is not related to the application that created this web page.

Update

I forgot to mention the following part:

The table displayed correctly; but due to a problem with IE9 cell in large tables, I had to clear all the spaces between the table / thead / tbody / tr / td tags. I solved this by forcing the replacement of regular expressions in my application HTML output:

 // response is the string with my HTML output which will be written to the browser after this: string expression = @">[ \t\r\n\v\f]*<td"; response = Regex.Replace(response, expression, @"> <td"); 

If I comment out the RegEx replacement, data overflow will work fine, but I ran into a ghost cell issue that causes misalignment and all-round ugliness. When uncommenting, all cells are fully aligned, but the overflow stops working.

As I said, the problem only applies to IE9. All other browsers (including IE9 in compatibility mode) perfectly display the table in states with comments / without commenting.

Answer 1

I managed to solve the problem after a lot of searching and patience.

The problem is with Bootstrap. Well, not Bootstrap for sure, but what Bootstrap.css does adds max-width: 100%; to each table. This works great for a general layout, but apparently IE9 cannot combine this with the scrollable overflow-x setting. IE9 doesn't really like the maximum and minimum heights and widths from my experience.

But I still want to thank all of you for your efforts, you set me on the right path to find the root cause of this problem!

Answer 2

Add this to demo_table_jui.css on line 117 (below .dataTables_wrapper ):

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

This does the trick (at least here, in all browsers, including IE7 and IE8 mode in IE9).

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

---

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

Answer 3

Here is the solution for line 110 in .dataTables_wrapper add overflow:auto; after clear:both;

 .dataTables_wrapper { position: relative; min-height: 302px; _height: 302px; clear: both; overflow:auto; } 

Before

_{(source: iforce.co.nz )}

After

_{(source: iforce.co.nz )}

You might want to add an extra div around 3 tables and specify this overflow:auto; , clear:both; if you want to sit well under the search toolbar.

Answer 4

 /* * The position is changed from relative to inherit, to fix the issue with the scrolling of the wrapper. */ .dataTables_wrapper { position: inherit; clear: both; *zoom: 1; } 

The problem may be due to the position of the DIV. I fixed a similar problem by overriding the position in datatable css.

Answer 5

I fixed this by applying the following CSS:

 /* this is needed for IE and Firefox if using horizontal scroll*/ table{ max-width: none; min-height: 0%; }