Table Collapsing on Content - When Single Row

bryceray1121

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.

bryceray1121

Table HTML (Grabbed in firebug after page load (with data tables initialized):
[code]






Table Header




Details
Print
-/+














Column

Column

Column

Column






















Text



Text







Search:





[/code]

bryceray1121

This is the HTML as seen in the source:
[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!

allan

If I understand correctly - the table is hidden when it is initialised is it? Is that what the function hieviews.fnShowHide() is doing? Are you able to post a link to an example which shows this issue, as it looks like there is some information missing that would have relevance.

Thanks,
Allan

bryceray1121

The table is not hidden on initialization. The show/hide toggles hidden columns. Initially, there a couple columns which are hidden. However, some of them load as visible on initialization. Unfortunately, there is not a web url for this application. If you need more information I can try to give it to you, in the mean time I will work on a stand-alone example I can send to you. But that might take a while and this is kind of an urgent problem.

I appreciate your help.

allan

It's a bit difficult to say without actually being able to see it, but it looks to me like the problem is the x-scroll bar getting in the way (although I had thought that was only 16 or 17px in Windows, not the full 19px that seems to be masking your table, from the DOM above.

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

bryceray1121

Removing sScrollX, fixed the problem, but then I lose horizontal scroll capability.

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

When you added sScrollXInner - did you set it to a suitably large number - for example 200%?

Allan

bryceray1121

Can clarify sScrollXInner for me. Setting it to 200% will allow the inner table to stretch to 2x its width within the confines of the outer table (scroll bar used). Does this mean the iinner table will always have a scrollbar? Or is it just that it can stretch up to 200%?

bryceray1121

I've managed to reproduce the problem with the following html. I've reproduced the problem in IE9/IE8. However, i've seen it happen in the other IE versions I am just unable to reproduce that at the moment. I'd really appreciate if you took a look because I'm quite confused on why this is happening and have already spent a lot of time trying to debug this. Let me know if you have any specific questions about the reproduction.

http://aacommand.com/test_scroll_collapse.html

Thanks!

allan

Greif - sorry - I never got back to you with your previous message. sScrollXIndeed forces the table inside the scrolling element to a given width - can be useful for forcing the table to take up a certain amount of space.

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

bryceray1121

I forgot to include one important bit of debugging i did in my last post.

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.

allan

I think I might have figured out what is happening when I was thinking about this on the way in to work. What I think is happening is that when the table is shown initially there is no scrollbar. Then when DataTables initialises and adds the extra elements it needs to, the page height is larger - large enough to cause scrolling to occur and thus reducing the width of the page by about 17px. This in turn causes the wrapper to be slightly smaller than the table and thus you get scrolling...

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

bryceray1121

I managed to fix the IE bug by making a small adjustment to the datatables code:
[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.