AutoWidth Calculation - Not Necessarily a "Bug"

feemurk

Hi,

Never been much for UI work, but I downloaded DataTables yesterday and am lovin' it!!

I know you can disable the auto-width calculation and specify your own custom widths, but I wanted to know if it was by design that the width calculation (seemingly) doesn't account for columns with headers that are wider than the data. The visual result for me in IE6/7/8, Firefox 3.0.8 and Google Chrome is that the header text overlays the sorting functionality. (I couldn't find another posting about this - forgive me if there is already one)

I was readin' through the _fnCalculateColumnWidths and given my inexperiene with jQuery/javascript's functionality and how browsers calculate widths - please, correct me if i'm wrong - I can only assume that it's a small programming increment to add logic to compare the returned widths for each column of the nCalcTemp table used to calculate column widths to that of the original column-header's width and return a padded width if calculated width = the original column-header's width (the padding to account for the sorting functionality image's width). I'm no jQuery expert so I don't know how to go about doin' this but i suspect you can use the oHeaders object to iterate through it's children (s, i think) and compare widths to the oSettings.aoColumns[i].sWidth before disposing with the temporary table used to calculate the widths?!?!

I hope that made sense....

Keep up the great work - it's an eye-opener to see what jQuery and its users are doing with javascript these days - you guys are GOOD at what you do!

FeemurK

allan

Hi FeemurK,

Great to hear that DataTables is going down well :-)

Interesting question about the column widths - this part of DataTables is sort of the "deep dark internals" where most people fear to tread - nice one going straight there!

The _fnCalculateColumnWidths() function basically builds a small table using the header information and the longest string it can find for each column (so two rows in total) - and then injects this into the DOM as a hidden table. This allows the browser to do all the complicated work of figuring out exactly how wide each column should be (I read the HTML spec for this with the intention of implementing this part of it in Javascript - I quickly abandoned that idea in favour of this one...).

So now we have the optimal widths for each column, taking into account the header information - however, as you rightly point out, it does not take into account styling information such as that for the sorting headers. This is presentation information, and can be entirely defined by CSS - the Javascript doesn't need to know about this.

In this specific case, I would simply increase the padding-right such that there is enough padding to ensure that the sorting image will not be overlapped by text. In my example stylesheet this selector is "table.display thead th" - just whack a few more pixels on that and the problem will go away :-) I've just changed by default padding for the headers to be "3px 18px 3px 10px" so that this doesn't happen.

I think I'll revisit this function at some point in the near future, as DataTables has changed a lot since it was originally written (this function is almost identical to how it was in 1.0) - there can be occasions when special class names and specific element styles could cause the auto width calculation to go slightly wrong, as it's processing is entirely text based. Added to the to-do list... :-)

Thanks for bringing this question up!

Allan

feemurk

Hi Allan,

Thank you for the prompt response! I totally forgot about CSS!!! (can you tell i'm not a UI guy!? LOL)

Will be makin' use of CSS instead of fiddling with manually set widths :)

FeemurK