Vertical scrolling in flexible layout issue

sd_zuo

There're two tables in the page as the following code shows.

[code]


A




B


[/code]

And the initialization code is:
[code]
$("#A, #B").dataTable({
aaData: d,
bJQueryUI: true, sPaginationType: "full_numbers", sDom: 't<"F"f>',
bAutoWidth: false, bPaginate: false, aaSorting: [],
asStripClasses: [],
oLanguage: DT_LANG,
aoColumns: tc,
sScrollY: 200
});

[/code]

When the page opens, everything looks fine. However, when I maximize the browser window, the data parts of the two tables expand to fill the enlarged space, but the header parts remain the same sizes.
Can the header resize with the body?

mstrand

Perhaps - "bAutoWidth": false - is needed? See these two threads:

http://datatables.net/forums/comments.php?DiscussionID=3234

http://datatables.net/forums/comments.php?DiscussionID=2697

allan

You need to call fnAdjustColumnSizing ( http://datatables.net/api#fnAdjustColumnSizing ) when the table container is resized. At the moment the sizing of the elements is fixed rather than fluid to make the problem (width and height calculations and manipulation) more tractable. Ideally in future I'll be able to relax this constraint, but for the moment call the API function and that will redo the calculations.

Allan

sd_zuo

Thank you allan.
The problem's solved by binding that fnAdjustColumnSizing function to the resize event.