Fixed Column breaks with too many columns in table

illiphilli

I have a datatable with about 20 columns. I'm trying to fix the first column based off this example:
http://datatables.net/release-datatables/extras/FixedColumns/index.html

However, it seams that after adding a certain number of columns, the table no longer fits within it's designated container, and I get this message in firebug:

[quote]
DataTables warning (table id = 'example'): The table cannot fit into the current element which will cause column misalignment. Increase the sScrollXInner value or remove it to allow automatic calculation
[/quote]

As a test, I took the above example, stripped it down, and added a bunch more columns. I was able to re-produce the results.
Here's that test:
http://playground.phillipball.com/datatables/

Any insight/solutions would be greatly appreciated!

Thanks in advance,
Phillip

uouser

I am facing similar issue ..... As my number of columns go above 9, the table loses its formatting and I get the same warning message.

Anyone know how to fix this. Thanks.

allan

Long delay on this one - sorry about that. So first thing I would suggest is removing sScrollXInner and allow DataTables to enable scrolling if it is needed only, rather than forcing it.

Also try updating to the 2.5.0 dev version of FixedColumns, which is available as the nightly on the downloads page.

Allan

manishainvitra

Hi Allan,
I am facing the same error. Though I remove sScrollXInner from the initialisation code it still misalign the columns. I think the solution to this is to adjust width of the columns in pixel according to the number of columns you are going to embed in scrolling.

I tried a lot to adjust the width of sScrollXInner parameter for different number of columns. For some cases the page comes with proper column alignment. But for some cases it get misalign the columns....

Below is my initialization code
[quote]
$(document).ready( function () {
var oTable = $('#example').dataTable( {
"bScrollCollapse": true,
"bPaginate": false,
"bSort": false,
"bSearchable": false,
"bAutoWidth": false,
"sScrollY": "300px",
"sScrollX": "100%",
"sScrollXInner": "950" /* It varies dynamically if number of columns increases */

} );
var oTables = new FixedColumns( oTable, {
"iLeftColumns": 2,
"iLeftWidth": 350

}
);

setTimeout(function(){oTables.fnRedrawLayout();}, 1000);
} );

$(document).ready( function () {
var oTable = $('#examplerf').dataTable( {
"bScrollCollapse": true,
"bPaginate": false,
"bSort": false,
"bSearchable": false,
"bAutoWidth": false,
"sScrollY": "300px",
"sScrollX": "100%",
"sScrollXInner": "950" /* It varies dynamically if number of columns increases */

} );
var oTablerfs = new FixedColumns( oTablerfs, {
"iLeftColumns": 2,
"iLeftWidth": 350

}
);

setTimeout(function(){oTables.fnRedrawLayout();}, 1000);
} );

[/quote]

allan

Can you give us a link please?