jqgrid horizontal scrollbar issue in IE9 - jqgrid

Question

IE 9 displays a horizontal scrollbar on jqgrid which is not the case when rendered in chrome or mozilla.
following are the default configurations that i set when i create my jqgrid
datatype: "local",
colNames: ['Name', 'Note Type', 'Based On', 'Version', 'Status', 'Description', 'Id', 'Tags', 'TemplateId', 'TemplateVersionId', 'IsLocked'],
colModel: [
{ name: 'Name', index: 'Name', title: false, resizable: false, width: 175, classes: 'grid-pointer' },
{ name: 'NoteType', index: 'NoteType', width: 100, title: false, resizable: false, classes: 'grid-pointer', cellattr: function () { return 'style="white-space: normal";"height:auto";"vertical-align:text-top;"'; } },
{ name: 'BasedOn', index: 'BasedOn', width: 100, title: false, resizable: false, classes: 'grid-pointer', cellattr: function () { return 'style="white-space: normal";"height:auto";"vertical-align:text-top;"'; } },
{ name: 'Version', index: 'Version', classes: 'grid-pointer', align: "right", width: 50, title: false, resizable: false },
{ name: 'Status', index: 'Status', width: 80, classes: 'grid-pointer', title: false, resizable: false },
{ name: 'Description', index: 'Description', title: false, resizable: false, width: 135, formatter: self.trimDescription, classes: 'grid-pointer' },
{ name: 'id', index: 'id', hidden: true, title: false },
{ name: 'Tags', index: 'Tags', hidden: true },
{ name: 'TemplateId', index: 'TemplateId', hidden: true },
{ name: 'TemplateVersionId', index: 'TemplateVersionId', hidden: true },
{ name: 'IsLocked', index: 'IsLocked', hidden: true}],
sortname: 'Name',
rowNum: 10,
sortorder: 'asc',
loadonce: true,
viewrecords: true,
multiselect: false,
autowidth:true,
height: 'auto',
rowList: [10, 20, 30],
pager: '#template-grid-pager',
noRecordText: "No records to view",

Answer 1

I had the same issue so I just disabled the overflow by calling the following function. In my case I am only doing it if the grid uses force fit, as all columns should fit then, however if you do not use force fit you can omit the conditional statement.
function jqGridDisableHScroll() {
//if columns are force fit all columns will always fit on screen.
if ($('#yourgrid').jqGrid('getGridParam', 'forceFit')) {
var gridview = $('#gview_yourgrid');
$('.ui-jqgrid-bdiv', gridview).css({ 'overflow-x': 'hidden' });
}
}
Note: The reverse would need to be done though if column resizing is allowed and force fit is not on. Also you could just do this via css if it will be always the case for your grids