free-jqgrid tool bar buttons wrapping in a second row

Question

When adding add, edit, delete and other buttons to a free-jgGrid tool bar using a pager, they wrap to a second row at nearly 50% of the grid width.

I'm not using pagination, but I do use record count (grid properties scroll: 1, viewrecords: true).

In the example I set on jsFiddle, you can see that Delete and Refresh buttons wrap on a second row, although there is plenty space to set them in the first one.

This behavior isn't observed in jgGrid.

I wonder if it is possible to have all buttons in a single row, being the grid width large enough ?

JSFiddle code snippet ( forked from an OlegKi's example): JSFiddle example

$(function () {
    "use strict";
    $("#grid").jqGrid({
        colModel: [
            { name: "firstName", width: 200 },
            { name: "lastName", width: 200 }
        ],
        data: [
            { id: 10, firstName: "Angela", lastName: "Merkel" },
            { id: 20, firstName: "Vladimir", lastName: "Putin" },
            { id: 30, firstName: "David", lastName: "Cameron" },
            { id: 40, firstName: "Barack", lastName: "Obama" },
            { id: 50, firstName: "François", lastName: "Hollande" }
        ],
        pager: "#pager",
        viewrecords: true,
        gridview: true,
        scroll: 1,
    })
.jqGrid('navGrid',
      '#pager',
      {edit: true, edittext: 'Edit',
       add: true, addtext: 'Add',
       del: true, deltext: 'Del',
       search:false,
       view: true, viewtext: 'View',
       refresh: true, refreshtext: 'Refresh'}       
      );
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/css/ui.jqgrid.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/jquery.jqgrid.min.js"></script>

<table id="grid"></table>
<div id="pager"></div>

Answer 1

If I correctly understand, what you need, then the option pagerRightWidth with small enough value (see the documentation), will be what you need.

Additionally the usage of scroll: 1 isn't recommended. The option gridview: true is enabled by default in free jqGrid and it can be removed. In your case you can use pgbuttons: false, pginput: false options to remove paging buttons. See https://jsfiddle.net/bft286tz/8/, which uses the following options

    ...
    pager: true,
    pgbuttons: false,
    pginput: false,
    viewrecords: true,
    pagerRightWidth: 90
}