title: Controlling JQGrid horizontal scroll bar in ASP.NET MVC Application
body: <p>I have come across a problem with my JQGrids horizontal scroll bar 
  in an ASP.NET MVC application. The issue is, i have given a fixed width to the grid, and expect that horizontal scroll bar should appear dynamically when i resize my columns; but it does not, instead, the grid spills out of the page. I have tried to add a div element with overflow=scroll around the table which holds the grid, even that did not solve the issue.</p>
  
  <p>Am i doing something wrong? I tried to dig through the existing threads, but could not find similar ones.</p>
  
  <p>I have attached the HTML and Script code as a reference. Any help is appreciated.</p>
  
  <pre><code>&lt;div id="div1" class="clsInner"&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td colspan="2" class="clsHeading"&gt;
                  Existing Proposals
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="2"&gt;
                  &lt;table id="list" cellpadding="0" cellspacing="0" class="scroll"&gt;
                  &lt;/table&gt;
                  &lt;%-- &lt;div id="pager" class="scroll" style="text-align: center;"&gt;
                  &lt;/div&gt;--%&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="2"&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code> jQuery("#list").jqGrid({
       url: '&lt;%= Url.Content("~/OrganizationAccount/AccountHomeGridData") %&gt;/',
       datatype: 'json',
       mtype: 'GET',
       colNames: [
           'Id', 'Proposal Name', 'Proposal #', "", "", 'Organization', 'Category',
           'Sub Category', 'Status', 'Updated On', 'Updated By', 'Review', 'Edit'],
       colModel: [
           { name: 'ProposalId', index: 'ProposalId', width: 1, align: 'left' },
           { name: 'ProposalName', index: 'ProposalName', width: 180,  align: 'left' },
           { name: 'ProposalNumber', index: 'ProposalNumber', width: 72,
             align: 'left', resizable: false },
           { name: 'ProposalNumber1', index: 'ProposalNumber1', width: 1,
             align: 'left' },
           { name: 'ProposalNumber2', index: 'ProposalNumber2', width: 90,
             align: 'left' },
           { name: 'Organization', index: 'Organization', width: 150, align: 'left' },
           { name: 'Category', index: 'Category', width: 85,
             align: 'left', resizable: false },
           { name: 'SubCategory', index: 'SubCategory', width: 90, align: 'left' },
           { name: 'Status', index: 'Status', width: 100, align: 'left' },
           { name: 'LastUpdated', index: 'LastUpdated', width: 90,
             align: 'left', resizable: false },
           { name: 'UpdatedBy', index: 'UpdatedBy', width: 100, align: 'left' },
           { name: 'Review', index: 'Review', width: 50,
             align: 'center', sortable: false, resizable: false },
           { name: 'Edit', index: 'Edit', width: 40,
             align: 'center', sortable: false, resizable: false}],
       //pager: jQuery("#pager"),
       rowNum: 10,
       rowList: [10, 20, 30],
       sortname: 'ProposalName',
       sortorder: "asc",
       viewrecords: true,
       pginput: false,
       pgbuttons: false,
       rowList: false,
       imgpath: '&lt;%= Url.Content("~/scripts/themes/sand/images")%&gt;/',
       caption: 'Proposal Details',
       width: '980'
       //autowidth: true,
       //forceFit: false
   });
  
   jQuery("#list").hideCol("ProposalId");
   jQuery("#list").hideCol("ProposalNumber1");
   jQuery("#list").hideCol("ProposalNumber2");
  </code></pre>