Table Grid not contained inside scroll container etc.

pnjsinc

I am using sScrolly with a datatable that contains anywhere from 0 to 1000+rows of data. This works well in Chrome, Maxthon,Opera and Safari.
There are two unique problems with IE and Firefox:
First IE problem: the table itself does not resize to fit inside the scroll container (sorry about the obnoxious red color, shows the problem better).
Here is the screen shot of the problem with IE http://grab.by/r2iK
Second, firefox problem. everything contains like desired, however there is a gap between the table and the scroll bar
Here is the screen shot of the problem with Firefox http://grab.by/r2ku

Below is my config and the html of the table:
CONFIG:
[code]
$('#table').dataTable({ "bJQueryUI": true,
"aoColumns": [null,null,null,null,null,null,null,null,null,{ "bVisible": false },{ "bVisible": false}],
"bLengthChange": true,
"bStateSave": true,
"bProcessing": false,
"bSortClasses": true,
"bAutoWidth": false,
"bScrollInfinite": true,
"bScrollCollapse": true,
"sScrollY": ($('#tab').height()-170),
"bPaginate": false,
"oLanguage": {
"sSearch": "Filter records:",
"sInfo": "_START_ to _END_ of _TOTAL_ Records Displayed!"
},
"fnRowCallback": function(nRow,aData,iDisplayIndex,iDisplayIndexFull) {
/* numbers less than or equal to 0 should be in red text */
if(parseFloat(aData[9])>0||parseFloat(aData[10])==2||parseFloat(aData[10])==3) {
$('td',nRow).addClass('redText');
}
return nRow;
}

});
[/code]

This is secure website so I can't give direct access.

Please note that the table is in inside of a jquery tab.
HTML:
[code]





Column1



Column2



Column3



Column4



Column5



Column6



Column7



Column8



Column9



Column10



Column11




[/code]

Any help would be greatly appreciated.

pnjsinc

Figured out the problem, having position:relative in the styling of the table caused the issue with IE.

However still unsure what is causing the bonus gap with FF.

allan

I'm afraid that without a test case, we really can't offer much help.

One thing I might suggest with the Firefox issue, try DataTables 1.10 which is pre-beta (in git) at the moment, that might resolve it. If not, I'd really love a test case so I can actually fix it.

Allan

pnjsinc

How do I link to the pre-beta? I would love to test it out!

allan

You can grab it from here: https://github.com/DataTables/DataTables/tree/1_10_wip/media/js . Let me know how you get on with it!

Allan

pnjsinc

Tried it out, got a quite a few errors so I don't want to go down that road yet.

I am experiencing another problem that seems strange to me, thought I was able to resolve but my solution created a kluge.
I even set the column width in the config.
Screen shot of problem when there is no data..
http://grab.by/raJe

Screen shot of same table after clicking on a column to resort:
http://grab.by/raJg

Below is my config for this table along with the html:

config:
[code]
oTableAction=vTop.$('#table').dataTable({
"aoColumns": [{ "sType": "image","sWidth": "40px" },
{ "bSortable": true,"sWidth": "50px" },
{ "bSortable": true,"sWidth": "24px" },
{ "bSortable": true,"sWidth": "108px" },
{ "bSortable": true,"sWidth": "60px" },
{ "bSortable": true,"sWidth": "60px" },
{ "bSortable": true,"sWidth": "60px" },
{ "bSortable": true,"sWidth": "220px" },
{ "bSortable": true,"sWidth": "220px" },
{ "bVisible": false}],
"bJQueryUI": true,
"bLengthChange": false,
"bStateSave": true,
"bProcessing": false,
"bSortClasses": true,
"bScrollCollapse": true,
"bScrollInfinite": true,
"sScrollY": 255,
"bPaginate": false,
//"sDom": '',
"oLanguage": {
"sSearch": "Filter records:",
"sInfo": "_START_ to _END_ of _TOTAL_ Records Displayed!"
},
"bSortClasses": true,
"fnRowCallback": function(nRow,aData,iDisplayIndex,iDisplayIndexFull) {
/* numbers less than or equal to 0 should be in red text */
var diff=Math.floor((Date.parse(aData[5])-Date.parse(FixDateFormat(new Date())))/86400000);
if(aData[1]=='1-High'||parseInt(diff)<0&&aData[0].indexOf('false')>0) {
$('td',nRow).addClass('redText');
}
return nRow;
}

});
[/code]

Note that it is basicly the same config as earlier, just a static sScrollY.

HTML:
[code]







Closed



Priority



AI



Owner



Created



DueDate



Updated



Title



Response










[/code]

Any suggestions would be greatly appreciated.

pnjsinc

Allan, also wanted to let you know I am running 1.9.4, tried to use the debugger, just locks up IE..

allan

No to sure what is causing that I'm afraid. i'd need a link to a test case to be able to debug it.

Allan