Datatable within jquery UI tabs first row missmatch height when using ScrollY

caesaram85

Hi!!! First of all, thanks for this really amazing project.

Now the issue:

When i use sScrollY on datatables object, if the datatable is inside jqueryui tabs, the first row has some tds with missmatched height.

I've search a lot but still can't fix it!!!

The code:

[code]

oGrillaAdeudados = $('#oGrillaAdeudados').dataTable({
"aoColumnDefs": [{ "sWidth": "10%", "aTargets": [-1] }, {...} etc etc ],
"bJQueryUI": true,
"bPaginate": false,
"bFilter": true,
"sScrollY": "175px",
"bScrollCollapse": true
});

$("#tabs").tabs({
show: function (event, ui) {
var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
if (oTable.length > 0) {
oTable.fnAdjustColumnSizing();
}
}
}).css({ "height": "330px", "font-size": "small" }).tabs('select', 0);
[/code]

When the scrollY is activated, the first row of the datatable seems like this:

http://imageshack.us/photo/my-images/253/datatabletdheighterror.png
http://img253.imageshack.us/img253/9793/datatabletdheighterror.png

As you can see, the first row has some tds with less height than the others. It's strange, it only happens with Google Chrome.

****UPDATE****
It happens with internet explorer too.
In ffox it works perfect.
****************

Can someone please help me.

Sorry for my bad English, i'm from Argentina.

Thanks in advance.

caesaram85

I'm the only one with this problem? =(

caesaram85

Can someone please help me working around with this bug?
I know it's a minor problem, but it happens when using sScrollY on internet explorer and Chrome and it's really anoying.

I can't fix it, i've tryied getting the first tr, then the first td of that tr and clone it's height to the rest of the tds in that first tr, but same result =(

caesaram85

****** FIXED ******

[code]
$("#tabs").tabs({ cache: false,
"load": function (event, ui) {
var table = $.fn.dataTable.fnTables(true);
if (table.length > 0) {
$(table).dataTable().fnAdjustColumnSizing();
}
}
}).css({ "height": "330px", "font-size": "small" }).tabs('select', 0);
[/code]

That solves the problem, calling fnAdjustColumnSizing() on "load" event instead of "show" as the example says.

When i call that fn on "show" tab's event it readjust width over again and that's when the tds appears like 1px less than the others in the first row.

It happens in Chrome and Internet Explorer (IT DOESN'T HAPPEN WHEN USING AJAX TO FILL TABS), just when content is preloaded. =)