ColVis Quirkiness

TacoRob

I'm encountering a bizarre display quirk with ColVis that has me puzzled. Essentially, I have modified the datatable examples to test against a local MySQL datasource using ColVis.

The table I am working with contains 40 columns. When I click the "Show/Hide Columns" button the first time the page loads, it displays an empty rectangle that does not contain any column list I can toggle on/off. However, if I click the "Show/Hide Columns" button a second time (without reloading the page or anything), it correctly displays the columns and allows me to turn visibility on/off as anticipated.

Any idea what may be causing this? It seems odd that it would work after the button has been pressed once; but why would it display an empty column list when clearly the datatable has columns/data loaded and already presented?

allan

Sound very odd. I'm afraid I've not got an immediate explanation. Can you give us a link to an example where this happens?

Thanks,
Allan

TacoRob

Hi Allan,

Sure - I'll share the files via my DropBox account. Can you send me your email addy so I can share that folder with you?

TacoRob

I've figured it out!! =) I was digging through the ColVis.js and found the culprit. In the "_fnCollectionShow" function, there is a segment of code which is:

[code]

/* Visual corrections to try and keep the collection visible */
var iDivWidth = $(nHidden).outerWidth();
var iDivHeight = $(nHidden).outerHeight();

if ( iDivX + iDivWidth > iDocWidth )
{
nHidden.style.left = (iDocWidth-iDivWidth)+"px";
}

if ( iDivY + iDivHeight > iDocHeight )
{
nHidden.style.top = (iDivY-iDivHeight-$(this.dom.button).outerHeight())+"px";
}
[/code]

This calculation appears to be the culprit, because if I comment it out it displays as expected every time:

[code]

/* Visual corrections to try and keep the collection visible */
/* 2010.11.20 => Removed by Rob Brennan to prevent against "empty" rectangle
var iDivWidth = $(nHidden).outerWidth();
var iDivHeight = $(nHidden).outerHeight();

if ( iDivX + iDivWidth > iDocWidth )
{
nHidden.style.left = (iDocWidth-iDivWidth)+"px";
}

if ( iDivY + iDivHeight > iDocHeight )
{
nHidden.style.top = (iDivY-iDivHeight-$(this.dom.button).outerHeight())+"px";
}
*/
[/code]

allan

Interesting - I wonder what iDivWidth and iDivHeight are when this happens... possibly NaN? Sure you hding the table when it is initialised?

Also - you can ping me using http://datatables.net/contact :-)

Allan