Bootstrap 4 wrong pager

[RootProgger]

Nice Work Tonytomov :-)

I want to use jqGrid with Bootstrap4, the Files are packed with Webpack and are correctly loaded in DOM.

js:

const $ = require('jquery');
import 'jqGrid/js/i18n/grid.locale-de';
require('jqGrid/js/jquery.jqGrid');

css:

$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/brands';
@import "~jqGrid/css/ui.jqgrid-bootstrap4.css";

initial Options are:

const listGrid = $('#foo');
    listGrid.jqGrid({
        url: '/list',
        styleUI: 'Bootstrap4',
        iconSet: 'fontAwesome',
        datatype: 'json',
        mtype: 'POST',
        pager: '#pager',
        rowNum: 100,
        rowList: [20, 50, 100, 250, 500, 1000],
        multiselect: true,
        rownumbers: true,
        shrinkToFit: true,
        footerrow: false,
        ignoreCase: true,
        autowidth: true,
        height: 500,
        responsive: true,
        forcefit: true,
        viewrecords: true,
        gridview: true,
        grouping: false,
        colModel: [....]
});

Now my Pager looks so:

instead, when i remove the bootstrap4.css from import:

i use v5.5.4 jQuery 3.6.0 when comes the 5.5.5 Release to npm?

[tonytomov]

Hello,

The pager in jqGrid is little different. We divide the pager in three equal parts - left, center and right. Every part can contain different group - navigator buttons, pager buttons and record information. By default the center part contain pager buttons and other related items.

The behavior of this is controlled of parameter responsive (if set to true as in your case). In case there is no enough place (because of grid width) certain pager buttons are not displayed.

In certain cases this is not convenient and we can overcome this by setting another grid parameter to true : forcePgButtons

Set this parameter to true and the pager related item will be displayed.

Regards