Resize the jqGrid page edit box

Question

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

<

Answer 1

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.