Table Grid not contained inside scroll container etc.

Table Grid not contained inside scroll container etc.

pnjsincpnjsinc Posts: 5Questions: 0Answers: 0
edited October 2013 in DataTables 1.9
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.

Replies

  • pnjsincpnjsinc Posts: 5Questions: 0Answers: 0
    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.
  • allanallan Posts: 63,381Questions: 1Answers: 10,449 Site admin
    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
  • pnjsincpnjsinc Posts: 5Questions: 0Answers: 0
    How do I link to the pre-beta? I would love to test it out!
  • allanallan Posts: 63,381Questions: 1Answers: 10,449 Site admin
    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
  • pnjsincpnjsinc Posts: 5Questions: 0Answers: 0
    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.
  • pnjsincpnjsinc Posts: 5Questions: 0Answers: 0
    Allan, also wanted to let you know I am running 1.9.4, tried to use the debugger, just locks up IE..
  • allanallan Posts: 63,381Questions: 1Answers: 10,449 Site admin
    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
This discussion has been closed.