Column headers not aligned?

marcsu343a

So I've looked around for documentation about my problem and have found things that closely related but I am unable to get their solutions to work. This is a link to a picture showing the problem. http://imgur.com/QuSs0 What's happening is that the column headers that you would click to sort are not in aligned with the columns themselves.
debug code: ukukam

allan

Most likely you initialised the table in a display:none element and need to call fnAdjustColumnSizing when it is made visible. If not that, then please give us a link.

Allan

marcsu343a

I've added a button that specifically calls
[code] function adjust(){
oTable2.fnAdjustColumnSizing();}[code]
Upon pressing the button it does not fix the issue. But if i click one of the column headers they automatically fix themselves. I'm unable to give you a link due to IP blocking for login. Data comes from a database so creating it using the live.datatable site would be hard as well.

allan

If a click works, then try just calling fnDraw , but I suspect that's probably as much help as I can offer without being able to see it.

Allan

marcsu343a

Could I email/ private message you the information for the login/ webpage as well as instructions on how to reach the datatables?

allan

PM me by clicking on my name above and then selected "Send message".

Allan

bigocb

Was the cause ever discovered, I am having a similar problem with the headers and scrolling.

allan

@bigocb: Heh - when you say "ever", it was only yesterday this was posted :-).

It sounds to me like the problem is the table being hidden (display:none) when initialised: see for example http://datatables.net/release-datatables/examples/api/tabs_and_scrolling.html .

If it is not that for you, then please post a link - http://datatables.net/forums/discussion/9719/how-to-ask-for-help .

@marcsu343a : Thanks of rate PM. I've just replied there.

Allan

bigocb

Sorry it was late when I asked, didn't think about how little time had elapsed :)

I will check out that example. They aren't exactly hidden but since the cognos render waits to paint the whole page at once, they probably are behaving as if they are hidden.

allan

Yes - that would do it. Its also worth saying that we've found int he past that that has a massive performance penalty in IE6-8 - something to do with the way it parses the DOM for hidden elements.

Allan

bigocb

I ended up using

[code]
$(window).load( function () {
$('#myTable').dataTable().fnAdjustColumnSizing( false );
} );
[/code]

I think you have inadvertently answered my next question. I could only get small tables with a few columns to
run in IE8 when using Cognos. I think the way it renders the whole page as hidden is the issue.

jds13

I use the tabs plug-in with four tables in four tabs. None of these tabs are displayed when the page is rendered. I had to add this after the tabs setup calls so that the table is rendered when its associated tab is selected and the div shown:
[code]
$('#tabsdiv').bind('tabsshow',function(event,ui) {
var uitab = ui.tab.hash;
var uitbl = null;
if('#divA' ==uitab) uitbl = '#tblA';
if('#divB' ==uitab) uitbl = '#tblB';
if('#divC' ==uitab) uitbl = '#tblC';
// There are other tabs in this setup, and uitbl might be null
if(uitbl) $(uitbl).dataTable().fnAdjustColumnSizing( false );
});
[/code]

Denonth

@bigocp Your solution solved my problem.