JQGrid navGrid pager buttons overlap

Question

I am having a problem with the pager of the Jquery Grid. At first I think it was working great, but now the buttons at the pager are overlapping. I am using asp.net MVC 4, all the data is shown correctly, everythings works fine, except that the pager arrows are not working and the buttons are overlapped. Would appreciate your help on how to solve this.

The javascript code for the JQGrid is the following:

$(function () {
    $("#ListGrid").jqGrid({
        url: "/Transaction/GetTransactions",
        datatype: "json",
        colNames: ["BSN", "Date", "Ship From", "Address", "City", "EDI"],
        colModel: [
                { key: true, hidden: false, name: 'SHIPMENT_IDENTIFICATION', sortable: false, index: 'SHIPMENT_IDENTIFICATION', editable: true, align: 'center',
                    formatter: showBsnLink
                },
                { key: false, name: 'DATE', index: 'DATE', editable: true, sortable: true, formatter: 'date', align: 'center' },
                { key: false, name: 'NAME', index: 'NAME', editable: true, sortable: true, align: 'center', formatter: showClientLink },
                { key: false, name: 'ADDRESS_INFORMATION_01', index: 'ADDRESS_INFORMATION_01', editable: true, align: 'center' },
                { key: false, name: 'CITY_NAME', index: 'CITY_NAME', editable: true, align: 'center' },
                { key: false, name: 'View EDI', index: 'EDI', align: 'center', formatter: showEdiLink, editable: true }
            ],
        rowNum: 10,
        mtype: 'Get',
        height: 'auto',
        rowList: [10, 20, 30, 40],
        pager: jQuery('#pager'),
        sortname: 'SHIPMENT_IDENTIFICATION',
        viewrecords: true,
        sortorder: 'desc',
        loadonce: false,
        altRows: true,
        caption: "Transactions",
        emptyrecords: 'No records to display',
        jsonReader: {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false,
            Id: "0"
        },
        autowidth: true,
        shrinkToFit: true,
        multiselect: false,
        /*
        onSelectRow: function(id, status) {
        var rowData = $("#ListGrid").jqGrid('getRowData', id);
        window.location = "/Transaction/GetInfo/?date=" + rowData.TargetDate + "&id=" + rowData.Id;
        }*/
        onCellSelect: function (rowid, columnIndex, cellcontent, e) {
            /*
            alert(cellcontent);
            if (columnIndex == 2) {
            $('select[id=clientName]').val(cellcontent);
            $('#clientName').selectpicker('refresh'); 
            }*/
        }
    }).navGrid('#pager', { search: false, add: false, del: false, edit: false });
});

The code on the server side is the following:

public JsonResult GetTransactions(string sidx, string sord, int page, int rows, DateTime? DateFrom, DateTime? DateTo,
            string shipmentId, string clientName)
        {
            int pageIndex = Convert.ToInt32(page) - 1;
            int pageSize = rows;
            IEnumerable<ShipmentInfo> transactionResults = TransactionProvider.getTransactions();


            // Check if the user wants to filter by Shipment ID
            if (!shipmentId.IsEmpty())
            {
                transactionResults = transactionResults.Where(x => x.SHIPMENT_IDENTIFICATION.Contains(shipmentId));
            }

            // Check if the user wants to filter by clientName
            if (!clientName.IsEmpty() && clientName != "All")
            {
                transactionResults = transactionResults.Where(x => x.NAME.Contains(clientName));
            }

            // Check if the user wants to filter from Date
            if (DateFrom.HasValue)
            {
                transactionResults = transactionResults.Where(x => x.DATE >= DateFrom);
            }

            // Check if the user wants to filter from Date
            if (DateTo.HasValue)
            {
                transactionResults = transactionResults.Where(x => x.DATE <= DateTo);
            }

            int totalRecords = transactionResults.Count();
            var totalPages = (int)Math.Ceiling((float)totalRecords / (float)rows);

            // Sort by descending
            if (sord.ToUpper() == "DESC")
            {
                transactionResults = transactionResults.OrderByDescending(s => s.SHIPMENT_IDENTIFICATION);
                transactionResults = transactionResults.Skip(pageIndex * pageSize).Take(pageSize);
            }
            else // Sort by Ascending
            {
                transactionResults = transactionResults.OrderBy(s => s.SHIPMENT_IDENTIFICATION);
                transactionResults = transactionResults.Skip(pageIndex * pageSize).Take(pageSize);
            }

            var jsonData = new
            {
                total = totalPages,
                page,
                records = totalRecords,
                rows = transactionResults
            };

            return Json(jsonData, JsonRequestBehavior.AllowGet);
        }

This is the HTML view, using Bootstrap 3:

<div id="gridContainer" class="col-sm-9 col-md-10 col-xs-12 col-lg-10 row-offcanvas">
            <table id="ListGrid"></table>
            <div id="pager"></div>
            <div class="container-fluid" style="padding-top: 10px;">
                <div class="row">
                    @using (Html.BeginForm("exportPDF", "Transaction", FormMethod.Post, new {@class = "form-inline", @role = "form", @id = "actionForm"}))
                    {
                        <div class="form-group">
                            <button class="btn btn-info" type="submit" name="action" value="export">Export to PDF</button>
                            <button class="btn btn-info" type="submit" name="action" value="print" onclick="document.getElementById('actionForm').target = '_blank';">Print</button>
                        </div>
                    }
                    <div id="dialog" title="EDI">
                    </div>
                </div>
            </div>
        </div>

Any help would be appreciated, thanks.

Answer 1

Found the problem, the buttons were overlapping since I was using a custom css file that was overwriting the JQGrid CSS for the text input.