Nrthugu

jqgrid js v5.3.2. styleUI='Bootstrap4'.

With below grid setup and custom button created in loadComplete(), I got my custom button wrongly placed in 2nd cell which should be in 4th one. What is possible reason for this? TIA

Generated html viewed thru Edge's development tool:

And here is the code:

 $("#grd_siteuser").jqGrid({

            url: getGridDataUrl + '?gname=grd_siteuser',

            datatype: "json",

            colModel: [

                { label: 'UId', name: 'Id', hidden: true, key: true },

                { label: 'DomainId', name: 'DomainId', hidden: true },

                { label: 'Domain', name: 'Domain', hidden: true },

                { label: 'Email', name: 'Email', width: 150, editable: true },

                { label: 'UserName', name: 'UName', width: 100, editable: true },

                {

                    label: 'Status', name: 'Status', width: 80, sortable: false, editable: true,

                    formatter: 'select', stype: 'select', edittype: 'select',

                    editoptions: { value: "false:Inactive;true:Active" }

                },

                {

                    label: ' ', name: 'act', width: 80, sortable: false, align: 'center',

                    formatoptions: { keys: false, delbutton: false, editbutton: false }, formatter: 'actions'

                }

            ],

            viewrecords: true,

            autowidth: true,

            height: 300,

            mtype: 'Get',

            rowNum: 25,

            loadonce: true,

            editurl: updateSiteUserUrl,

            pager: "#grd_siteuser_pager",

            loadComplete: siteuser.onloadcompletesiteuser,

            subGrid: true,

            subGridRowExpanded: siteuser.onsubgridexpandsiteuser

        });

        $('#grd_siteuser').navGrid('#grd_siteuser_pager', {});

LoadComplete:

onloadcompletesiteuser: function (data) {

    var $grid = $("#grd_siteuser");

    var icol = home.getcolidxbyname($grid, "act"); //### return 7 correctly

    $(this).find(">tbody>tr.jqgrow>td:nth-child(" + (icol + 1) + ")")

        .each(function () {

            $("<div>", {

                title: "Reset Password",

                mouseover: function () {

                    $(this).addClass("ui-state-hover");

                },

                mouseout: function () {

                    $(this).removeClass("ui-state-hover");

                },

                click: function (e) {

                    var rid = $(e.target).closest("tr.jqgrow").attr("id");

                    var id = $grid.jqGrid("getCell", rid, "Id");

                    siteuser.resetpwd(id);

                }

            }

            ).css({ "margin-right": "5px", float: "left", cursor: "pointer" })

                .addClass("ui-pg-div ui-inline-custom")

                .append('<i class="fa fa-undo fa-stack-2x"></i><i class= "fa fa-lock fa-stack-1x pt-1" ></i>')

                .prependTo($(this).children("div"));

        });

}

The class class="fa fa-undo fa-stack-2x" and class= "fa fa-lock fa-stack-1x pt-1" are absolute positioned which caused this. Fix it by removing the absolute position of the class.