Dfyjkt

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.