1.7 Beta 3 - Column Width Problem

aprax

Hello,

I first would like to say that this is an awesome and powerful jQuery plugin, and thanks for putting the time and effort into this.

I think I may have discovered a bug where the data column widths to not match up to the header column widths when enabling the option 'sScrollX' with a CSS width of 100%.

A link to my example is at http://aprax2.dyndns.org/public/index.html

I tested this example with Chrome, Firefox, and Safari.

My code from the example is as follows.

[code]

$(document).ready( function() {

var myTable = $("#testing").dataTable( {
"bJQueryUI" : true,
"sPaginationType" : "full_numbers",
"aaData": [
/* Reduced data set */
[ "Trident", "Internet Explorer 4.0", "Win 95+", 4, "X" ],
[ "Trident", "Internet Explorer 5.0", "Win 95+", 5, "C" ],
[ "Trident", "Internet Explorer 5.5", "Win 95+", 5.5, "A" ],
[ "Trident", "Internet Explorer 6.0", "Win 98+", 6, "A" ],
[ "Trident", "Internet Explorer 7.0", "Win XP SP2+", 7, "A" ],
[ "Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", 1.8, "A" ],
[ "Gecko", "Firefox 2", "Win 98+ / OSX.2+", 1.8, "A" ],
[ "Gecko", "Firefox 3", "Win 2k+ / OSX.3+", 1.9, "A" ],
[ "Webkit", "Safari 1.2", "OSX.3", 125.5, "A" ],
[ "Webkit", "Safari 1.3", "OSX.3", 312.8, "A" ],
[ "Webkit", "Safari 2.0", "OSX.4+", 419.3, "A" ],
[ "Webkit", "Safari 3.0", "OSX.4+", 522.1, "A" ]
],
"aoColumns": [
{ "sTitle": "Engine" },
{ "sTitle": "Browser" },
{ "sTitle": "Platform" },
{ "sTitle": "Version", "sClass": "center" },
{
"sTitle": "Grade",
"sClass": "center",
"fnRender": function(obj) {
var sReturn = obj.aData[ obj.iDataColumn ];
if ( sReturn == "A" ) {
sReturn = "A";
}
return sReturn;
}
}
],
"sScrollX" : "100%"
}
);
});


[/code]

dchoi

Ah yes we are also facing this exact same issue. Any help is greatly appreciated.

iuliandum

you have to set
[code]

[/code]

allan

@aprax: Your table only needs to take up about 33% of the width available in your example and hasn't been told to take up more than that - so there is no need for x-scrolling. Try as iuliandum says and disable x-scrolling unless you actually need the table to scroll left and right.

*Edit: Hmm - having said that, the columns should at least line up here... I'll look into it.

Allan

allan

Here is a work around - in fnInitComplete do:

[code]
this.fnAdjustColumnSizing();
this.fnDraw();
[/code]
And that should resize your columns and headers to match each other. So not something fundamentally broken with my calculations for the columns - more that I simply didn't call those functions automatically when using a data source like you have there - that will be addressed!

Thanks for reporting this!

Regards,
Allan

aprax

Greetings,

I tried the suggested workaround, but I still experienced column misalignment when the window width was smaller than the table width.

In the revised example, I have set the table width to 100%, added more columns to the table, and added the statements to fnInitComplete.

http://aprax2.dyndns.org/public/workaround.html

[code]
$(document).ready( function() {
$("#testing").css("width", "100%");
var myTable = $("#testing").dataTable( {
"bJQueryUI" : true,
"sPaginationType" : "full_numbers",
"aaData": [
[ "blah1", "blah2", "blash3", "blah4", "", "blash1241241231232131", "blah8", "blah9", "", "blah11", "", "blah131223", "blah14124124"]

],
"fnInitComplete" : function() {
this.fnAdjustColumnSizing();
this.fnDraw();
},
"aoColumns": [
{ "sTitle": "blargh1"},
{ "sTitle": "blargh2"},
{ "sTitle": "blargh3"},
{ "sTitle": "blargh4"},
{ "sTitle": "blargh5"},
{ "sTitle": "blargh6"},
{ "sTitle": "blargh7"},
{ "sTitle": "blargh8"},
{ "sTitle": "blargh9"},
{ "sTitle": "blargh10"},
{ "sTitle": "blargh11"},
{ "sTitle": "blargh12"},
{ "sTitle": "blargh13"}
],
"sScrollX" : "100%"
}
);
});

[/code]

allan

Hi aprax,

It looks like the column sizes are being calculated without taking into account the header information when dynamically creating the header like this - which of course is wrong... I'm travelling at the moment so can't really look into it too deeply, but will be doing so soon to get an updated beta available.

Regards,
Allan