Small Width Calculation Glitch when Toggling Hidden Columns

bryceray1121

I've had this problem for a while and have never really found a solution for it. The problem in general is pretty minor. My tables load by default with some columns hidden. I then have a button that toggles the hidden columns to be visible and hidden again.

Initially when the table loads it loads perfectly. However, when I hit the toggle button to make the hidden columns visible a small white space appears to the right of the table (but within dataTables_scrollBody). This space is identical to the width of a vertical scroll bar and is on the right side of the table. It appears as if the calculation of the data table (the child to dataTables_scrollBody) is calculating the wrong width.

This happens with tables whose height does not require a scroll bar. If a table does require a scroll bar because it has sufficient rows then this is not an issue.

Changing the columns back to hidden (after making them visible) does not fix the problem, the space appears to stay there until I reload the page.

Note, that this also happens when I click on the header of a column to sort it. The sort functionality I use is the default sort functionality built into the library.

Here is my visibility toggle function:
[code]
hieviews.fnShowHide = function( obj, tag, textVal){
var tmpTable = $jq(tag).dataTable();
var tmpCols = tmpTable.fnSettings().aoColumns;
var bVis = false;
for (var i=0;i < (tmpCols.length);i++) {
if ($jq(tmpCols[i].nTh).hasClass("dataTables_notVisible")) {
bVis = tmpTable.fnSettings().aoColumns[i].bVisible;
tmpTable.fnSetColumnVis( i, bVis ? false : true );
}
}
obj.innerHTML = bVis ? textVal[0] : textVal[1];
//tmpTable.fnAdjustColumnSizing();
//tmpTable.fnDraw();
}
[/code]

I have tried every combination of fnAdjustColumnSizing() and fnDraw() in an effort to force a more accurate redraw (and width calculation). However, none of these combinations eliminated the space.

Here is a link to the screenshot of the problem.
http://www.flickr.com/photos/26503296@N04/5364741908/

allan

Is this in IE? Or other browsers as well? Sounds like it might be the same as this thread: http://datatables.net/forums/comments.php?DiscussionID=3855 .

Allan

bryceray1121

I've tested it in firefox and IE7 and IE8 and it happens in all of them.

I don't think its quite the same problem as the other thread. The problem occurs if I hide/show initially hidden columns, sort a column, or filter a table. So it seems to me that it is a problem associated with common functionality between methods that alter the table.

Is there any more information I can provide you to aide you in better understanding this problem?

allan

Could you possibly try the 1.7.6.dev version I've just committed and is available on the downloads page: http://datatables.net/download/ ? There was an error in the way that the column widths were calculated - I wonder if this would do it.

Thanks,
Allan

bryceray1121

I just tested it with 1.7.6.dev and the problem still exists :(

Thanks for looking into this, I appreciate it.

allan

Damn :-(. Do you have Y scrolling enabled there?

Allan

bryceray1121

Both x and y scrolling are enabled.

Here is my datatable initiation:
[code]hieviews.renderDataTable = function(selector) {
var out = [];
var tables = $jq(selector);
var sorting;

for ( var i=0, iLen=tables.length ; i= 0){
sorting = [ defaultCol, 'desc' ];
}else{
sorting = [0,'desc'];
}

var oTable2 =$jq(tables[i]).dataTable({
"aaSorting": [ sorting ],
"sScrollY": "200px",
"sScrollX": "100%",
"bScrollCollapse":true,
"sDom": 'rt<"bottom"flp>',
"bPaginate": false,
"bStateSave": false,
"aoColumnDefs": [
{"bSearchable": false, "bSortable": false, "aTargets": ["dataTable-exclude"]},
{"bVisible":false, "aTargets" : ["dataTables_notVisible"]}
]
} );

out.push( oTable2 );
}
[/code]

allan

Could you possibly also show me your table header, so I can see how many columns there are and how they fit into the options.

Thanks,
Allan

bryceray1121

Here is the HTML for the table after the datatables initiation:
[code]




sample

DetailsPrint
-/+













Column

Column

Column

Column

Column





























Data

Data

Data

Data

Data



Data

Data

Data

Data

Data



Data

Data

Data

Data

Data








Search:





[/code]

bryceray1121

Another interesting tidbit to add to this discussion. Additional steps that can be used to recreate the problem (tested in IE and Firefox):
1.Load the page with the tables in the browser.
2.Open up firebug so it is viewable in the lower portion of screen.
3.Refresh the page.
4.When the page reloads the firebug extension should still be visible. At this point the tables display without error. However, if you then close the firebug extension (thus increasing the screen real estate) the bug occurs.

Don't know if this helps any, but I thought it was interesting.