On subgrid of jqGrid, the right border is not visible - jqgrid

Question

I'm using the free jqGrid version 4.15.0, and I have a subgrid in the main grid and the right border of the subgrid is not visible.
jQuery version: 1.12.4
jQuery UI version: 1.11.4
fontawesome version: 4.7.0
See my fiddle or below code snippet: https://jsfiddle.net/eL7h9e8z/
You'll need to click the + sign to show the subgrid.
var maingriddata = [{
Column1: "Test1",
Column2: "Test1",
ShowSubGrid: true
}, {
Column1: "Test2",
Column2: "Test2",
ShowSubGrid: false
}];
var subgridData = [{
SubCol1: 'SubCol1',
SubCol2: 'SubCol2',
SubCol3: 'SubCol3'
}, {
SubCol1: 'SubCol11',
SubCol2: 'SubCol22',
SubCol3: 'SubCol33'
}];
$(function() {
"use strict";
var $grid = $("#policyGrid");
$grid.jqGrid({
datatype: "local",
data: maingriddata,
colNames: ["Column1", "Column2", "", ""],
colModel: [{
name: "Column1",
width: 50
}, {
name: "Column2"
}, {
name: "viewsubgrid",
align: "center",
width: 21,
formatter: function(cellvalue, options, rowObject) {
if (rowObject.ShowSubGrid) {
return "<span class='fa fa-fw fa-plus subgridIcon'></span>";
} else {
return " ";
}
}
}, {
name: "ShowSubGrid",
hidden: true
}],
cmTemplate: {
sortable: false,
resizable: false
},
iconSet: "fontAwesome",
loadonce: true,
altRows: true,
caption: "",
width: '100%',
height: '100%',
shrinkToFit: true,
autowidth: true,
height: 380,
pgbuttons: false,
pgtext: null,
toppager: false,
pager: true,
rownumbers: false,
threeStateSort: false,
subGrid: true,
subGridOptions: {
hasSubgrid: function(options) {
return options.data.ShowSubGrid;
},
reloadOnExpand: false,
openicon: "ui-helper-hidden"
},
subGridRowExpanded: function(subgridDivId, rowId) {
var subgrid_table_id, pager_id;
subgrid_table_id = subgridDivId + "_t";
pager_id = "p_" + subgrid_table_id;
var $table = $("<table id='" + subgrid_table_id + "' class='scroll'></table>");
$("#" + subgridDivId).append($table);
$("#" + subgrid_table_id).jqGrid({
datatype: "local",
data: subgridData,
colNames: ['Sub Col 1', 'Sub Col 2', 'Sub Col 3'],
colModel: [{
name: "SubCol1",
width: 100,
resizable: false
}, {
name: "SubCol2"
}, {
name: "SubCol3"
}, ],
cmTemplate: {
sortable: false
},
rowNum: 0,
pgbuttons: false,
pgtext: null,
sortable: false,
toppager: false,
viewrecords: true,
pager: true,
rownumbers: false,
height: '80px',
autoresizeOnLoad: true,
idPrefix: subgridDivId + "_" + rowId + "_",
loadComplete: function(data) {
$("#" + subgrid_table_id).jqGrid("setGridHeight", '100%');
},
beforeSelectRow: function(rowid, e) {
return false;
}
}).unbind("contextmenu");
$("#" + subgrid_table_id).jqGrid('navGrid', {
add: false,
edit: false,
del: false,
refresh: false,
search: false
});
},
beforeSelectRow: function(rowid, e) {
var iCol = $.jgrid.getCellIndex(e.target);
if (iCol == $grid.jqGrid("getGridParam", "iColByName")['viewsubgrid']) {
var $btn = $(e.target).closest("td").find('.subgridIcon');
var $tr = $(e.target).closest("tr.jqgrow");
if ($tr.find(">td.sgcollapsed").length > 0) {
$(this).jqGrid("expandSubGridRow", rowid);
$btn.removeClass('fa-plus').addClass('fa-minus');
} else {
$(this).jqGrid("collapseSubGridRow", rowid);
$btn.removeClass('fa-minus').addClass('fa-plus');
}
}
return false;
}
}).jqGrid("navGrid", {
add: false,
edit: false,
del: false,
refresh: false,
search: false
})
.jqGrid("hideCol", "subgrid")
.unbind("contextmenu");
});
.ui-helper-hidden {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script type='text/javascript'>
$.jgrid = $.jgrid || {};
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.0/jquery.jqgrid.src.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.0/css/ui.jqgrid.css" rel="stylesheet"/>
<div id="pnlGrid" style="margin-left: 10px; margin-right: 10px;width:700px;">
<table id="policyGrid">
</table>
</div>
Missing border image:
I've noticed that if I reduce (manually) '.ui-jqgrid-hdiv','.ui-jqgrid-bdiv' & '.ui-jqgrid-pager' by 2px, the border is visible.
Anybody has an idea?
Thanks.

Answer 1

Thank you for the bug report and for the demo, which reproduces the problem!
The reason of the problem is the usage of wrong box-sizing on .ui-jqgrid (outer div of the grid) in case of grid as subgrid. The box-sizing of all jqGrid elements should be border-box with the only exception .ui-jqgrid, which should be content-box. One can fix the problem by adding the following additional CSS rules:
.subgrid-data > .tablediv > .ui-jqgrid {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.subgrid-data > .tablediv > .ui-jqgrid > .ui-jqgrid-view {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
The first rule reset box-sizing of .ui-jqgrid to content-box and the next one changes it back to border-box for children of .ui-jqgrid-view. I updated the main code of ui.jqgrid.css on GitHub too (see the commit).
The demo https://jsfiddle.net/OlegKi/eL7h9e8z/2/ demonstrates working of the changes. I made some other small changes in your code to fix some minor problems.