Header Width / ScrollX / Lots of Columns

Philipp

Hi there

We encountered a problem with the ScrollX Feature and a large number of columns. At some point, the width of the table header and the main-table are no longer correct.

for testing purposes i just modified the scroll_XY.html example from the datatables-example (sorry for the german headers ;-))

any ideas how to solve this problem?

Philipp

http://img843.imageshack.us/img843/803/17687835.jpg


-------------
[code]





DataTables example

@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";




$(document).ready(function() {
$('.display').dataTable( {
"sScrollY": 200,
"sScrollX": "100%",
"sScrollXInner": "110%"
} );


} );





NOT WORKING



Name

Funktion neu

BG


Gesamtbez

gognjen

Hi Philipp,

I have exactly the same problem as you had. Did you maybe find a solution to fix this?

allan

First thing to do would be to make sure you are using 1.8.2.dev from the download page. And also remove the "sScrollXInner" property to allow the table to pick the sizing. If that doesn't work, can you give me a link please.

Allan

clifton

I'm having the same issue. I think the issue is that the cells only expand larger than the header width if a single word in the cell has a larger width than the header would provide. Otherwise it will create newlines based on spaces.

I've tried to modify the anonymous functions passed into _fnApplyChildren within the _fnScrollDraw function. My basic approach was to traverse the data structure for each column, find the longest string, create a temporary element with the innerHTML of the cell, call width() on the temp element, and if that calculated with is larger than iWidth, then replace iWidth with the new width of the temp element.

I'm having some issues doing this though. The width of the headers isn't staying consistent with the data.

Feel free to clone the code and help! https://github.com/cliftonswafford/DataTables/commit/531eb942ba14be346592d9e28557f038514ff874

clifton

Bah! The solution has nothing to do with javascript or calculating widths!

If you just add table.display td { white-space: nowrap; } to datatable.css it fixes this "issue"! ... cue the Feature vs. Bug discussion :)

allan

DataTables (like other HTML tables) will typically try to make the table as small as possible horizontally. If you want to override this there is the sScrollXInner property to force the inner table width, or as you point out you can use white-space to have the table formatted nicely by the browser. I think it would be fairly difficult (slow) to do this in DataTables, and since there is a CSS property for exactly this, I'm included to leave it like that.

Allan

tamersalama

I think the main issue is when does the column (td/th) width is calculated.

In my case; If no scroll configuration is added, some tds would auto wrap and the width is calculated based on the wrapped text. The th is then set with a narrow width.

After adding ScrollX/Y, and as the table is allowed to grow horizontally/vertically, the td is expanded, but the th width is till narrow (from the above width calculation).

I'd say moving the width calculation after applying the scrolling might fix it.

This is just an analysis of the behavior as I still haven't gone through the code.

HTH

tamersalama

It turned out that setting table width of 100% (css) resolved it for me (IE7).

cazador7907

From the above I also worked with the columns minimum width settings. I have a data set returning an inordinately large number of data columns. By forcing the table to display a minimum width for any data column, it appears to have solved the alignment issue that was plaguing me.

So, in the css file ....

table.display td{
min-width: 75px;
}