jQuery Grid Plugin - jqGrid

Hi guys, 

Another what i hope is a minor problem. I am testing with IE 8 and Firefox. I have a master/subgrid scenario built.

When i expand a row to display my subgrid, the width of the subgrid matches the width of the parent row. When i resize the window however, the subgrid doesn't resize yet the parent does. I'm fine with that. However, in firefox, when i make the screen smaller, a horizontal scroll bar automatically appears for the sub grid, which is good, because users can at least still see the columns. In IE 8 however, the columns just disappear off the page as i decrease the window size.

Any advice on how to make IE8 force a scroll like firefox does? I tried several CSS tricks with no luck.

here is my code so far:

<script type="text/javascript">

function init() {

    var lastsel;

    $("#contractors").jqGrid({

        url:'contractor_data.aspx?call=' + $("#<%= lblContractorCompany.ClientID %>").text(),

        datatype: 'json',

        mtype: 'GET',

        colNames:['ID','Full Name'],

        colModel:[

            {name:'ID',index:'ID', width:100,hidden:true},

            {name:'FullName',index:'FullName', width:55}            

        ],

        pager: "#contractorsPager",

        rowNum:-1,

        autowidth:true,

        height:"100%",

        sortname: 'ID',

        sortorder: "desc",

        viewrecords: true,

        caption: 'Contractors',

        subGrid: true,

        subGridRowExpanded: function(subgrid_id, row_id) {

            var listUrl = "";

            // we pass two parameters

            // subgrid_id is a id of the div tag created within a table

            // the row_id is the id of the row

            // If we want to pass additional parameters to the url we can use

            // the method getRowData(row_id) - which returns associative array in type name-value

            // here we can easy construct the following

            var subgrid_table_id;

            subgrid_table_id = subgrid_id+"_t";

            $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table>");

            $("#"+subgrid_table_id).jqGrid({

              url:"contractor_data.aspx?sub=true&fullname="+$("#contractors").getRowData(row_id).FullName + "&complete=" + $("#cbComplete").attr("checked") + "&verified=" + $("#cbVerified").attr("checked"),

              datatype: "json",

              colNames: ['ID','Customer','Full Name','Start Time','End Time','Project Name','Job Category','Actual Hours Worked', 'Labor Cost','Project Expense','Complete','Verified by Manager'],

              colModel: [

                {name:"ID",index:"ID",hidden:true,key:true},

                {name:"Customer",index:"Customer",width:250},

                {name:"FullName",index:"FullName",width:150},

                {name:"StartTime",index:"StartTime",width:100},           

                {name:"EndTime",index:"EndTime",width:100},

                {name:"ProjectName",index:"ProjectName",width:400},

                {name:"JobCategory",index:"JobCategory",width:150},

                {name:"ActualHoursWorked",index:"ActualHoursWorked",width:150,editable:true},

                {name:"LaborCost",index:"LaborCost",width:150,editable:true},

                {name:"ProjectExpense",index:"ProjectExpense",width:150,editable:true},

                {name:"Complete",index:"Complete",width:100,editable:true,edittype:"checkbox",editoptions: {value:"Yes:No"}},

                {name:"VerifiedByManager",index:"VerifiedByManager",width:150,editable:true,edittype:"checkbox",editoptions: {value:"Yes:No"}}

              ],

              rowNum:-1,

              height: "100%",

              autowidth:true,

              rowNum:20,

              onSelectRow: function(id){

       if(id && id!==lastsel){

       $("#"+subgrid_table_id).jqGrid('restoreRow',lastsel);

       $("#"+subgrid_table_id).jqGrid('editRow',id,true);

       lastsel=id;

       }

         },

         editurl:"contractor_data.aspx",

              sortname: 'ID',

              sortorder: "desc"

            });

        }

    });

    $("#contractors").jqGrid('navGrid','#contractorsPager',{search:false,edit:false,add:false,del:false});

    resize_the_grid();

}

function resize_the_grid()

{    

    // we have to subtract 240 because that's approximately the size of the quick launch bar space

    if ($("div[ID^='gbox_contractors']").length > 0) {

        $('#contractors').setGridWidth($(window).width()-40, true);

    }

}

$(document).ready(init);

$(window).resize(resize_the_grid);

</script>