title: Resize the jqGrid page edit box
body: <p>In my ASP.NET MVC 3 app I have the pager enabled on my jqGrid, as shown in the picture below:</p>
  
  <p><img src="https://i.stack.imgur.com/pwGIj.png" alt="jqgrid pager"></p>
  
  <p>The textbox for Page (center of image with the number 1 in it) is really wide - way wider than it needs to be.  Does anyone know how to adjust the size of this box?</p>
  
  <p>This is particularly an issue when my grid is narrower than this one, at that point the textbox for the Page pushes (or is placed) too far to the left and ends up squashing the buttons, as seen in the picture below:</p>
  
  <p><img src="https://i.stack.imgur.com/gFAt1.png" alt="jqgrid pager, narrower"></p>
  
  <p>Here, the two buttons to the left of "Page" (previous page, first page) are under the "Edit" label that is part of my custom Edit button.  Notice that the page box is still really wide.  Also, the "View 1-10 of 1005" on the right side, visible in the first image, is truncated in the narrower grid.</p>
  
  <p>Perhaps there is a setting for this or someone has a workaround.  I'd rather the second grid not have to be wider than it needs to (my workaround is to set the <code>width</code> to a value rather than <code>'auto'</code> or <code>'inherit'</code>, but that makes the grid columns wide.  A properly sized textbox for Page would leave plenty of room for the pager buttons plus my own button.</p>
  
  <p>The pager/custom button for my grid look something like this:</p>
  
  <pre><code> .jqGrid('navGrid', '#icecreamPager', 
      { search: true, edit: false, add: false, del: false, searchText: "Search" },
     {}, // default settings for edit
     {}, // default settings for add
     {}, // default settings for delete
     {closeOnEscape: true, closeAfterSearch: true, multipleSearch: true }, // settings for search
     {}
    )
    .jqGrid('navButtonAdd', '#icecreamPager',
     { caption: "Edit", buttonicon: "ui-icon-pencil",
       onClickButton: function () {
         var grid = $("#icecreamGrid");
         var rowid = grid.jqGrid('getGridParam', 'selrow');
         var cellID = grid.jqGrid('getCell', rowid, 'icecreamID');
         var src = '@Url.Action("Edit", "Icecream", new { id = "PLACEHOLDER" })';
         document.location = src.replace('PLACEHOLDER', cellID);
      },
      position: "last"
     });
  </code></pre>
  
  <p>I've been looking through the jqGrid documentation and examples but haven't happened upon how to set this.  Ideas?  This is the 4.0 jqGrid.</p>