Table Collapsing on Content - When Single Row
Table Collapsing on Content - When Single Row
bryceray1121
Posts: 65Questions: 0Answers: 0
I've run into this problem but I had not been able to recreate it in the past. I've finally discovered the cause and wanted to post up to see if there was a solution.
On page load my data table will load. It should look like this:
http://www.flickr.com/photos/26503296@N04/5693688285/
However, when the page loads it actually looks like this:
http://www.flickr.com/photos/26503296@N04/5693688265/
There is one row in this table, but it has collapsed and as a result covered the data row. It took me a while to figure out why, but there is a case where some tables do not collapse. This is a screenshot of a table on page load that was not collapsing:
http://www.flickr.com/photos/26503296@N04/5693688245/
You will notice one difference between this screenshot and the previous. In one of the data cells there is so much text that it forces the text to a second line in the cell. When this happens the table loads correctly.
So this bug is constrained to tables with a single row in which none of the data cells overflow to a second line. Below is some code in hopes that it will help diagnose the problem. I should also note, that this is an IE only bug. I've seen it happen in multiple versions of IE, but I performed these tests/screenshots in IE9.
I am currently using Datatables 1.7.6. But I have also tested it with the latest beta version and it does not make a difference.
On page load my data table will load. It should look like this:
http://www.flickr.com/photos/26503296@N04/5693688285/
However, when the page loads it actually looks like this:
http://www.flickr.com/photos/26503296@N04/5693688265/
There is one row in this table, but it has collapsed and as a result covered the data row. It took me a while to figure out why, but there is a case where some tables do not collapse. This is a screenshot of a table on page load that was not collapsing:
http://www.flickr.com/photos/26503296@N04/5693688245/
You will notice one difference between this screenshot and the previous. In one of the data cells there is so much text that it forces the text to a second line in the cell. When this happens the table loads correctly.
So this bug is constrained to tables with a single row in which none of the data cells overflow to a second line. Below is some code in hopes that it will help diagnose the problem. I should also note, that this is an IE only bug. I've seen it happen in multiple versions of IE, but I performed these tests/screenshots in IE9.
I am currently using Datatables 1.7.6. But I have also tested it with the latest beta version and it does not make a difference.
This discussion has been closed.
Replies
[code]
Table Header
Details
Print
-/+
Column
Column
Column
Column
Text
Text
Search:
[/code]
[code]
Table Header
Details
Print
-/+
Column
Column
Column
Column
Column
Column
Column
Text
Text
Text
Text
[/code]
And here is my datatables initialization code:
[code]
var oTable2 =$jq(tables[i]).dataTable({
"aaSorting": sorting,
"sScrollY": "200px",
"sScrollX": "100%",
"bScrollCollapse":true,
"sDom": 'rt<"bottom"flp>',
"bPaginate": false,
"bSortClasses":false,
"bStateSave": false,
"aoColumnDefs": [
{"bSearchable": false, "bSortable": false, "aTargets": ["dataTable-exclude"]},
{"bVisible":colDefaultDetails, "aTargets" : ["dataTables_notVisible"]}
]
} );
[/code]
I appreciate any help you can offer. I've debugged this as far as I can and need someone with a little more knowledge of data-tables and its known browser bugs.
Thanks!
Thanks,
Allan
I appreciate your help.
So two suggestions to try:
1. If you remove sScrollX from the initialisation, does the problem go away?
2. If you call fnDraw after the table's initialisation (but which sScrollX still in), does that also fix the issue?
Thanks,
Allan
I added fnDraw in a variety of different ways and locations and it had no affect on the position.
I also tried adding sScrollXInner under sScrollX and it fixed the problem. However, it broke some column alignments on wide tables.
Allan
http://aacommand.com/test_scroll_collapse.html
Thanks!
Thank you for the example - I guess the first question I'll be asking myself is why does IE behave differently from the other browsers in that is scrolling X and Y, while Webkit for me isn't showing any scrolling on those tables. I'll look into this and get back to you.
Regards,
Allan
This problem only occurs as the tables reach the bottom of the page. If you remove enough tables so they all fit on the page (with some generous white space at the bottom) the problem goes away. If you then add them back so the browser has a scroll bar (or approaching the need for a scroll bar) the problem comes back.
One way to confirm if this is the case would be to double the number of tables on the page so there is always scrolling, regardless of DataTables being initialised or not.
So I think there are a number of options to address this at the moment:
1. Remove x-scrolling if you don't need it
2. Call fnAdjustColumnSizing after all the tables have initialised
3. Add body { overflow-y: scroll; } to your CSS to make it always show the scrollbar
As to how to fix this internally in DataTables - I'm not sure at the moment. The problem is that the table width has been fixed, and the x-scrolling means that is the width that will be used. It could re-calculate the column sizes automatically but that seems unneeded.
Regards,
Allan
[code]
if ( o.oScroll.sY !== "" && o.oScroll.bCollapse )
{
nScrollBody.style.height = _fnStringToCss( o.oScroll.sY );
var iExtra = (o.oScroll.sX !== "" && o.nTable.offsetWidth > nScrollBody.offsetWidth) ?
o.oScroll.iBarWidth : 0;
if ( o.nTable.offsetHeight < nScrollBody.offsetHeight )
{
nScrollBody.style.height = _fnStringToCss( $(o.nTable).height()+iExtra+1 );
}
}
[/code]
Here you will see I add 1px to the nScrollBody.style.height. Adding this extra pixel seems to force internet explorer to behave. Its kind of a hacky solution but is working so far.