On subgrid of jqGrid, the right border is not visible

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 "&nbsp;";
          }
        }
      }, {
        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.

Solution

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.