Internet Explorer 8 sets height=6px with sScrollX with jquery.js >1.7.1 (possible Fix)

xtrm

Internet Explorer 8 creates a default height="6px" when we enable the "sScrollX" parameter with jquery versions above 1.7.1. The issue does not happen with version 1.7.1. I have tested with all Datatables versions from 1.9.0 to 1.9.4 and the bug only happens if we update the jquery.js file.
The problem is that we visually see two headers.
I have carefully look for some possible external css which could add that height but didnt found anything.

I have not tested with IE 9 or above, and didnt test with Opera or Safari.


Lets see an example with jquery.js version 1.8.2
-------------------------------------
When sScrollX is set, it creates another header below the default header for column names. The code below is a second header created by sScrollX:
[code]





[/code]

The above code works perfectly in Firefox, since the height is automatically set to 0px in all cases:
[code]

[/code]
However in Internet Explorer 8, for some reason the height is automatically set to 6px (debugged with Developer Tool for IE):
[code]

[/code]
[code]
inline style
height : 6 px
[/code]


If we try to fix it with css, it wont work in some cases:
http://datatables.net/forums/discussion/2765/a-side-effect-of-vertical-scroll-feature-creating-two-thead-sections/p1
I tested some possible css solutions but height is overwritten all the time in IE8 with inline style.
[code]
.dataTables_scrollBody table thead tr
{
max-height: 0px;
height: 0px;
//height: auto \9;
}
[/code]

A possible fix would be to set it manually once the datatables has been load so the height could not be changed by anything. Setting it in
"$(window).bind('resize', function ()" will not work. We must use fnInitComplete:
http://www.datatables.net/ref#fnInitComplete
[code]
"fnInitComplete": function(oSettings, json)
{
//alert( 'DataTables has finished its initialisation.' );
if( $.browser.msie )
{
//alert("test");
$('.dataTables_scrollBody table thead tr').css({ 'height' : '0px' });
};
}
[/code]


This worked for me however it would be better to guess why IE is adding that height and fix the code in the right place.

xtrm

I tested it again, and it still needs to add this code in order to fix it in IE when we search or reorder columns (the datatable has been already load and we only redrawn the content):
[code]
"fnInitComplete": function(oSettings, json)
{
//alert( 'DataTables has finished its initialisation.' );
if( $.browser.msie )
{
//alert("test");
$('.dataTables_scrollBody table thead tr').css({ 'height' : '0px' });
};
},
"fnDrawCallback": function( oSettings )
{
//alert('DataTables has redrawn the table');
if( $.browser.msie )
{
//alert("test");
$('.dataTables_scrollBody table thead tr').css({ 'height' : '0px' });

};
},
[/code]

xtrm

Another important addition, if we use jquery column filter extension with parameter: sPlaceHolder: "head:after" , we will need to call fnAdjustColumnSizing(); to realign the header columns with the body.
[code]
} ).columnFilter
({
sPlaceHolder: "head:after"
});//--end datatable--
exdatatable.fnAdjustColumnSizing();
[/code]

Check http://www.datatables.net/ref#fnAdjustColumnSizing for more info.

You may also check the IE8 bug here, solved if we use fnAdjustColumnSizing():
http://live.datatables.net/esabiy/10/edit
(* remember to put two headers in the html code if you use sPlaceHolder: "head:after" )