another complex header alignment issue

natebeaty

We have some complex headers not lining up with the data, here's a screenshot: http://d.pr/i/IkbC

This is a dev server in constant flux, but here's a link: http://depaulihs.firebelly.co/dataportal/Auctions/reo-100-residential-parcel/community-area/2005/2012/

Debug info: http://debug.datatables.net/uxatih

It was working when we had 4 subheaders, but with 5 it seems to have broken the autosizing. I'm hoping not, but there may be an HTML error buried in there. Any help would be much appreciated.

allan

> "sScrollX": "nullpx"

In the initialisation. Try `100%` - which is really the only value sScrollX should be.

Allan

natebeaty

I'll give that a shot. It was setting the width by finding the width of the wrapper:

[code]
"sScrollX": $('#data_portal_table_wrapper').outerWidth()+'px',
[/code]

..this may have been attempting to fix issues before updating to latest DataTables—it was a while ago when I was struggling to get scrollX working with our design.

natebeaty

Hm, that didn't seem to change anything. The headers are still not lining up with the data columns.

Anything else I might try?

allan

Hmmm - I'm not sure what is causing that I'm afraid. i'll need to spend some time and look into what is causing it. I'll try to make some time to do this soon. Thanks for the link as that will certainly help.

Allan

natebeaty

Thanks for taking a look. I'll also poke around and if I discover anything will post here.

What's odd is we were having no problems with a colspan=4 layout like:

[code]
| | 2010 | 2011 |
| header |-----------------------------------------
| | q1 | q2 | q3 | q4 | q1 | q2 | q3 | q4 |
[/code]

The first thing I looked for was an HTML error but I can't track anything down. I'll see if I can figure out if anything else was changed also (working with another coder on this).

Thanks again.

natebeaty

I think I found the fix. I put in a pause before initializing the datatable (we're pulling data dynamically) and saw some of the cels were wrapping text. Adding:

[code]
.dataTable td {
white-space:nowrap;
}
[/code]

allowed the width calculations to work properly and now the headers line up.

natebeaty

Although now I'm seeing an issue when a value in the first column of data rows is wider than the header. See here: http://d.pr/i/tRqe

Both of these fix the issue:

- set .dataTable td { max-width: 50px; } (something small, less than the header)
- reload results with no items larger than the header

Seems to be a rare little bug in the sizing algorithm? I'm assuming this is a pretty unusual table layout. At least I hope it is.

natebeaty

Sorry to bombard my own thread, but I'm still seeing various alignment errors.

It looks like it's having issues when data cels are wider than the header cels. At least, that's my best guess.

Here is another screenshot of the alignment getting off: http://d.pr/i/I4JE

Is it possible that the sizing algorithm is off for complex headers when there are data cels larger than the corresponding nested header?

allan

Absolutely it is possible - its a bug somewhere around there in the code for sure, so all bets are off...

I'd obviously be disappointed if it is (since its a bug), but it looks to me like its a column sizing issue, regardless of header complexity.

Out of interest, are you using Safari 5.x by any chance? I've just tried your page in Chrome and it renders perfectly. I've been trying to track a bug recently which looks the same as this one, but it appears to be Safari 5.x specific (6.x fixes it), so I'd be interested to know what you are using.

The problem in Safari 5.x is that when DataTables adds up the width of the columns of the sizing table, it doesn't match the width of the whole table. I don't know how that can be, but it can be out by a significant margin...

Allan

natebeaty

This was actually Chrome on a PC sent by our client, but I'm able to reproduce the same sizing issues in the latest Chrome on Mac (26.0.1410.65):

http://depaulihs.firebelly.co/dataportal/filings/units-buildings-foreclosure-filings/county/2005/2012/

allan

Could you try chugging one of the styles on your table please? Currently you have:

[code]
border-collapse: collapse;
[/code]

for the table - change that to:

[code]
border-collapse: separate;
[/code]

Does that help?

Allan

natebeaty

Well holy smokes, that looks like it did the trick. Thank you so much!

allan

Excellent. The `border-collapse: collapse` makes the browser width calculations virtually impossible to match the header and body tables. The widths applied to each are identically, but because the body table has tbody content, the browser takes that into account and can shift things around a bit.

From experience `border-collapse: separate` is absolutely the way forward with DataTables when scrolling.

Allan

natebeaty

I'd never even heard of that value for border-collapse. I'll keep it in mind next time I have table spacing issues.

Thanks again!

xtrm

I had the same problem but didnt like how it looks by using border-collapse: separate (since it doubles the borders of the table and looks horrible).

Found another solution which seems to work with border-collapse: collapse:
Adding only one side border in the css of the ths and tds:
[code]
{
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
/*border-left: 1px solid #ddd;*/
border-right: 1px solid #ddd;
}
[/code]

Now the resize calculations in IE and Chrome are perfect :)