title: jqgrid rtl horizontal scrollbar problem
body: <p>When I resize my grid , and the horizontal scrollbar appears , I see that an extra space in the header is created for it , but I still see it on the other grid columns. i want to see this scrollbar only on the most left column. </p>
  
  <p>this is my code:</p>
  
  <pre><code>$(function()
      {               
          $("#gridTable").jqGrid(
          {
              editurl: "clientArray",
              direction:"rtl",
              datatype: "local",
              colNames:['Code1','Code2', 'Code3', 'Code4','Code5','Code6','Code7','Code8','Code9'],
              colModel:[
                                          {name:'code1',index:'code1', width:60, sorttype:"int" , editable:true, edittype:'text'},
                                          {name:'code2',index:'code2', width:150, sorttype:"date" , editable:true, edittype:'text'},
                                          {name:'code3',index:'code3', width:150 , editable:true, edittype:'text'},
                                          {name:'code4',index:'code4', width:80,  sorttype:"float" , editable:true, edittype:'text'},
                                          {name:'code5',index:'code5', width:80, sorttype:"float" , editable:true, edittype:'text'},
                                          {name:'code6',index:'code6', width:80, sorttype:"float" , editable:true, edittype:'text'},
                                          {name:'code7',index:'code7', width:80, sortable:false , editable:true, edittype:'text'},
                                          {name:'code8',index:'code8', width:80, sorttype:"float" , editable:true, edittype:'text'},
                                          {name:'code9',index:'code9',  sorttype:"float" , editable:true, edittype:'text'},
                                    ],                
              height: '120px' ,
               scrolling: true,
              autowidth: true,
              shrinkToFit: false                
            });
  
            $("#gridTable").closest(".ui-jqgrid-bdiv").css({ 'overflow-y' : 'scroll' });
  
            var mydata = [
                 {code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
                 {code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
                 {code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
                 {code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
                 {code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
                 {code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
                 {code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
      ];
  
              for(var i=0;i&lt;=mydata.length;i++)
                      jQuery("#gridTable").jqGrid('addRowData',i+1,mydata[i]);
      });
  </code></pre>
  
  <p>and this is a picture of the problem:
  <img src="https://i.stack.imgur.com/J5PcN.gif" alt="enter image description here"></p>
  
  <p>Any help will be appritiated ,</p>
  
  <p>Thank's in advance.</p>