another complex header alignment issue
another complex header alignment issue
natebeaty
Posts: 15Questions: 0Answers: 0
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.
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.
This discussion has been closed.
Replies
In the initialisation. Try `100%` - which is really the only value sScrollX should be.
Allan
[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.
Anything else I might try?
Allan
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.
[code]
.dataTable td {
white-space:nowrap;
}
[/code]
allowed the width calculations to work properly and now the headers line up.
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.
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?
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
http://depaulihs.firebelly.co/dataportal/filings/units-buildings-foreclosure-filings/county/2005/2012/
[code]
border-collapse: collapse;
[/code]
for the table - change that to:
[code]
border-collapse: separate;
[/code]
Does that help?
Allan
From experience `border-collapse: separate` is absolutely the way forward with DataTables when scrolling.
Allan
Thanks again!
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 :)