Resize the jqGrid page edit box

In my ASP.NET MVC 3 app I have the pager enabled on my jqGrid, as shown in the picture below:

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?

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:

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.

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 width to a value rather than 'auto' or 'inherit', 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.

The pager/custom button for my grid look something like this:

 .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"
   });

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.

I suppose that you use ASP.NET MVC standard CSS which bring some minor problems in jqGrid. One from there is the pager width. It can be fixed with respect of

<style type="text/css">
    /* fix the size of the pager */
    input.ui-pg-input { width: auto; }
</style>

Another small recommendation is to use

<style type="text/css">
    table { border-style:none; border-collapse:separate; }
    table td { border-style:none; }
</style>

or

<style type="text/css">
    div.ui-jqgrid-view table.ui-jqgrid-btable {
        border-style:none;
        /*border-top-style:none;*/
        border-collapse:separate;
    }
    div.ui-jqgrid-view table.ui-jqgrid-btable td {
        border-left-style:none
    }
    div.ui-jqgrid-view table.ui-jqgrid-htable {
        border-style:none;
        /*border-top-style:none;*/
        border-collapse:separate;
    }
    div.ui-jqgrid-view table.ui-jqgrid-btable th {
        border-left-style:none
    } 
</style>

which would fix some problems with the width calculation and will remove unneeded horizontal scrolling bars. I made the feature request to make the corresponding changes in the standard CSS of jqGrid, but the request stay unanswerd.

I recommend you to take a look in the demo from the answer. All the settings and some other tricks are used in the demo. The demo project are downgraded to VS2008 corresponds to the question, but with the minimal modifications you can convert it back to VS2010.