Table Grid not contained inside scroll container etc.
Table Grid not contained inside scroll container etc.
pnjsinc
Posts: 5Questions: 0Answers: 0
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.
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.
This discussion has been closed.
Replies
However still unsure what is causing the bonus gap with FF.
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
Allan
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.
Allan