Vertical Scrolling Messes up Column Header Alignment

neags23

Hi all!

I'm using version 1.8.1 and am having nightmares over column header alignment with vertical scrolling enabled. After using various hacks to get this to work (looping through the scrollBody headers that are hidden to grab the appropriate widths and then applying them to the scrollHeader headers.... hiding the scrollHeader row completely and writing my own div headers based on the widths from the hidden scrollBody headers... etc.), I'm at my wit's end.

If I can get it to work in one browser, it breaks in the others. Right now with the code posted below, the headers line up correctly in Firefox and IE8 and IE9, but Chrome and IE7 are off. I'm using a *lot* of datatables on this project, and this is a problem with everyone. I'm desperate for help!

I'm not using any of my worthless hacks with the code below, just setting sScrollY.

Thanks!!

Screenshots:
www.dennissheppard.net/firefox_alignment.png
www.dennissheppard.net/chrome_alignment.png
www.dennissheppard.net/ie7_alignment.png

datatable code:
[code]
otable = $('#order_review_grid').dataTable({
'fnRowCallback': function (nRow, strings, displayIndex, dataIndex) {
return formatRow(nRow, dataIndex);
},
'fnDrawCallback':function()
{
checkIfOrderSubmitted(this);
},
'aoColumnDefs':
[
{ 'bVisible': false, 'aTargets': [COL_PRODUCT] },
{ 'bSortable': false, 'aTargets': [COL_IMAGE, COL_DELETE] },
{ 'sClass': 'right_align', 'aTargets': [COL_PRICE] },
{ 'sClass': 'center_align', 'aTargets': [COL_BRAND,COL_PACK] },
{ 'sClass': 'left_align', 'aTargets': [COL_DESCRIPTION] }
],
'sDom': 't',
'sScrollY':'405px',
'bScrollCollapse':true,
'aaSorting':[]
});
[/code]

Html:

[code]



SEQ #
Sc
O.G.
Image
Description
Brand
Pack
Price
Full
Partial
Ref #
 



<!-- loaded data will go here -->


[/code]

neags23

So I've figured out what's causing some of this. It has to do with setting a width on the table, or one of its containing divs.

If I get rid of all widths, the table lines up perfectly in all browsers.

But as soon as I try to set a width on either the table or a containing div, datatables either ignores the width and makes it much too wide, or if I use "important", the headers get misaligned.

So... still stuck.

ddivita

We are running into this same issue. We were wanting our grids to expand to the full width of the page. When we set that, the columns are getting set to the entire width of the page, like we wanted, but the scrollbar is under the last column:

https://picasaweb.google.com/109034534334401197927/DataTablesColumnIssue?authkey=Gv1sRgCKv2kp2nrsWpFg

dr_rafiki

I am having similar problems, and I'm at wits end. The problem is simple: When I add a vertical scroll bar the column headers do not size properly. When I click on a header it sizes properly, but the headers do not resize with the table on window resizing.

Any suggestion?

preety

I am also facing the same issue. Any suggestion would help.

allan

Can you please provide links to example test cases, or indeed your own pages, showing this problem please? The column alignment is rather complex and there are a number of things which can effect it - so I'd need a test case to see what the issue is. Please also ensure that you are using the latest version of DataTables (currently 1.9.1.dev - the nightly on the downloads page).

Allan

ddivita

Allan, in my previous post I supplied an image link. I'll try to get you our code as well.

niversoft

I had this problem with 1.9.1 final too, and managed to fix it by modifying the DataTables code.

The only trick that seemed to work is to set table-layout: fixed on o.nTable, o.nTHead.parentNode and o.nTFoot.parentNode when the detected browser is ie8 or 9. For the width calculation to run properly I remove the style attribute near the top of _fnScrollDraw, and put it back near the bottom.

Also, as the fixed tables column width apply without regards to the cell padding, I used innerWidth() instead of width() in the _fnApplyToChildren calls applying to the header and footer.

I applied the change in src/core/core.scrolling.js and recompiled. Tested on IE9 on an ajax-generated grid infinite-scrolling grid ( bScrollInfinite:true,bScrollCollapse:true,sScrollY:set,sAjaxSource:script.php ). Not tested yet in other contexts.
[code]
--- org/core.scrolling.js 2012-04-23 16:44:37.777678700 -0400
+++ mod/core.scrolling.js 2012-04-23 16:44:17.268628000 -0400
@@ -195,5 +195,6 @@
nScrollFootInner = (o.nTFoot !== null) ? o.nScrollFoot.getElementsByTagName('div')[0] : null,
nScrollFootTable = (o.nTFoot !== null) ? nScrollFootInner.getElementsByTagName('table')[0] : null,
- ie67 = $.browser.msie && $.browser.version <= 7;
+ ie67 = $.browser.msie && $.browser.version <= 7,
+ ie8up = $.browser.msie && $.browser.version >= 8;

/*
@@ -203,4 +204,10 @@
/* Remove the old minimised thead and tfoot elements in the inner table */
$(o.nTable).children('thead, tfoot').remove();
+ if (ie8up)
+ {
+ $(o.nTable).css("table-layout", "");
+ $(o.nTHead.parentNode).css("table-layout", "");
+ if (o.nTFoot) { $(o.nTFoot.parentNode).css("table-layout", ""); }
+ }

/* Clone the current header and footer elements and then place it into the inner table */
@@ -312,5 +319,5 @@
oStyle.height = 0;

- iWidth = $(nSizer).width();
+ iWidth = ie8up ? $(nSizer).innerWidth() : $(nSizer).width();
nToSize.style.width = _fnStringToCss( iWidth );
aApplied.push( iWidth );
@@ -332,5 +339,5 @@
oStyle.height = 0;

- iWidth = $(nSizer).width();
+ iWidth = ie8up ? $(nSizer).innerWidth() : $(nSizer).width();
nToSize.style.width = _fnStringToCss( iWidth );
aApplied.push( iWidth );
@@ -408,5 +415,10 @@
}
}
-
+ if (ie8up)
+ {
+ $(o.nTable).css("table-layout", "fixed");
+ $(o.nTHead.parentNode).css("table-layout", "fixed");
+ if (o.nTFoot) { $(o.nTFoot.parentNode).css("table-layout", "fixed"); }
+ }

/*
[/code]

allan

@niversoft - do you have border-collapse: collapse on your table tags by any chance? That has been shown to mess up the calculations for the column sizing. Failing that, if you can give me a link to the test case you were using for 1.9.1 that would be great.

Allan

Moolie

Allan, I'm having the same issue with 1.9.1. Please let me know if you need another live example.

allan

Yes please :-)

Allan

Moolie

Allan, I just sent you a message through the contact form.

Cheers,
Moolie

crob

Any update on the alignment issues? I'm currently using 1.9.0 and have slight alignment issues in Chrome and a more significant problem in IE7. I can give you a login privately if you would like to see it Allan.

allan

Yes, a link is required to be able to address any column alignment issues, as I need to be able to reproduce the issue.

Thanks,
Allan

mzNextstep

I've been experiencing this issue as well. My test environment displays slightly differently than what I see in the web debugger, but the net effect is basically the same. Here is the example: http://live.datatables.net/uwebip/6/edit#preview

As you can hopefully see, the columns don't line up. My test environment is in IE9, and there it seems like the problem is that the scrollbars are not accounted for when the widths are calculated. The best way to see that here is to look at the render using the real-time side-by-side preview, to be sure that the vertical scrollbar shows up. When the vertical scrollbar is present and the horizontal scrollbar is scrolled all the way to the right, you can see fairly clearly the issue that I believe we're all talking about.

As a side note, there is another issue I found that can also be seen with this example, when viewed in chrome at least (it also affects my test environment in IE9, but somehow does not apply when viewed in this debugger).
When bScrollCollapse = true and the width of the page is < the width of the table, a horizontal scrollbar appears at the bottom of the datatable, which is a perfectly normal behavior, and works just fine. However, when you then use the search filter box and then clear it out, the table expands to its normal max height, and the scrollbar at the bottom is no longer there. This behavior can be seen in the example here. Although it doesn't seem to cause any problems in the debugger here, it does cause mis-alignments between the locked columns and the table body in my test environment

tjain1981

I am also facing same issue (with 1.9.1 OR 1.9.4). I was able to fix it with little change in datatable code. I found that problem is visible only in case of automatic table layout and in my case, we can't have that. We have columns with no pre-defined width.


In order to fix this, i added one line (nSizer.style.minWidth =nSizer.style.width;) inside _fnScrolldraw method. I haven't verified this for side-effects but its working for me in almost all browsers.

_fnApplyToChildren( function(nSizer) {
nSizer.innerHTML = "";
nSizer.style.width = _fnStringToCss( aApplied.shift() );
nSizer.style.minWidth =nSizer.style.width;
}, anHeadSizers );

I request others to try this fix and if it works, we can ask Allan to include this in next release

Jlar

@Allan,

Thanks for this wonderful tool. It works like a charm. Except for this alignment issue :(
Has any workaround been done for this? I'm using V1.9.1 of Datatables, and getting messy alignment of the header and column with vertical scrollbar, and also if I click the sort of any of the columns, the horizontal scrollbar goes away and occupies the entire width of the screen.

I have used
[code]
setTimeout(function () {
oTable.fnAdjustColumnSizing();
}, 10);
[/code]
this piece of code to get the horizontal scrollbar properly during the initial loading, but whenever i perform a sort, the horizontal scrollbar gets collapsed :( Can I call this function again, somewhere to fix the horizontal scrollbar issue?

Hi Tjain1981,

Can you pls tell in which file '_fnScrolldraw' method modification needs to be added to make it work?

thanks in advance,
Jai

allan

@Jai - Please link to a test case showing the issue.

jeje_mars_ch

Hello all :-)

Facing same issue, I read with interest this thread and some other post over the net.

After many hours working on this, I found a solution adding the code below to the end of the fnDrawCallback :
[code]
//remove the inline-style 'width' from #myTable
$('#myTable').attr('style', $('#myTable').attr('style').replace(/width[^;]+;?/g, ''));

//retrieve the real width of #myTable and set it to the table header and its container
$('#myTable').closest('.dataTables_scroll').find('.dataTables_scrollHeaderInner, .dataTables_scrollHeaderInner > table.dataTable').css('width', $('#myTable').innerWidth()+'px');
[/code]


Hoping that can help you :-)

Jérôme

allan

Can you please link to a test case showing the issue, so I can debug and fix it properly in DataTables :-)

Allan

msamir

The problem still exist even with version 1.9.4

allan

See my last comment - without a test case to reproduce the issue, I can't possibly fix it!

barrykeepence

I am having the same issue. I have a large AJAX application and to it is difficult to post my code.

I have grabbed 2 screenshots - where can I post them?

I will now try to give some details.

I have a datatable that starts empty and I initialise it as a datatable and then add data to it. The table is in a div and I initialise with scroll y set. When the table first builds the header width fills the whole div width and then the scrollbar pushes the tbody across so that the header and and body do not line up.

If I filter the table so that the body does not require a scrollbar then it lines up. Interestingly when I remove the filter, the scrollbar appears and the header does line up with the tbody!

I suspect that the problem lies with the tbody getting squeezed when the scrollbar appears and the header (being in a seperate div) does not know about it. If datatables is initialised in a div that is already loaded with data to the point of scrolling then this may not happen.

I hope this helps - this bug is a major problem for me.

msamir

Allan, the problem that mess the Table header when enabling scroll, for me at least, that my HTML doucment direction is right-to-left, i found that the DIV "nScrollHeadInner" style is set always to a right padding equal to the width of the scroll-bar, which messes everything in Right-to left tables.

for an example please check this URL: http://live.datatables.net/edeset
is there any method to override the style of this DIV in my case problematically as i deal with bi directional web sites, that switches from Right-to-left and Left-to-right

watherton

Does anyone have a solution for this yet (complete solution).

allan

@msamir - The right-to-left issue is fixed in git and will be in the 1.10 release. You can pick up the latest version from git if you like.

@watherton - Please link to a test case showing the problem you are facing. Without a test case I don't know what is going wrong.

pixelgeek

Sorry to dig up an old topic but I was having this exact same issue and I relinked to 1.10 and it fixed the problem.

WahidAbdullah

i want my row orientation by vertically. That means my header appeared vertically. How can i do that. If any one have any idea please share me.

allan

@WahidAbdullah - I don't see how that relates to the original thread at all. In future, please open new threads for new discussions.

As noted in a number of other discussions in the forums, DataTables does not support rows in column orientation at this time.

Allan