Using setGridWidth method on jqGrid with ‘shrinktofit’ parameter ‘true’ when using with Bootstrap causes an unnecessary horizontal scrollbar to appear when number of records is less (i.e. without vertical scrollbar).
The horizontal scrollbar disappears as soon as records are more (i.e. with vertical scrollbar). To demonstrate the problem I have called setGridWidth method on Loadcomplete
I have even replicated the problem on jsfiddle: http://jsfiddle.net/yoabhinav/uqonspmd/
Here is a fiddle with setGridWidth method call inside Loadcomplete event commented which works fine as expected: http://jsfiddle.net/yoabhinav/knuj9xet/
$(document).ready(function () {
const data = { "rows":[{"OrderID":"1","CustomerID":"WILMK","OrderDate":"1996-07-04 00:00:00","Freight":"32.3800","ShipName":"Vins et alcools Chevalier"},{"OrderID":"2","CustomerID":"TRADH","OrderDate":"1996-07-05 00:00:00","Freight":"11.6100","ShipName":"Toms Spezialit\u00e4ten"},{"OrderID":"3","CustomerID":"HANAR","OrderDate":"1996-07-08 00:00:00","Freight":"65.8300","ShipName":"Hanari Carnes"},{"OrderID":"4","CustomerID":"VICTE","OrderDate":"1996-07-08 00:00:00","Freight":"41.3400","ShipName":"Victuailles en stock"},{"OrderID":"5","CustomerID":"SUPRD","OrderDate":"1996-07-09 00:00:00","Freight":"51.3000","ShipName":"Supr\u00eames d\u00e9lices"},{"OrderID":"6","CustomerID":"HANAR","OrderDate":"1996-07-10 00:00:00","Freight":"58.1700","ShipName":"Hanari Carnes"},{"OrderID":"7","CustomerID":"CHOPS","OrderDate":"1996-07-11 00:00:00","Freight":"22.9800","ShipName":"Chop-suey Chinese"},{"OrderID":"8","CustomerID":"RICSU","OrderDate":"1996-07-12 00:00:00","Freight":"148.3300","ShipName":"Richter Supermarkt"},{"OrderID":"9","CustomerID":"WELLI","OrderDate":"1996-07-15 00:00:00","Freight":"13.9700","ShipName":"Wellington Importadora"},{"OrderID":"10","CustomerID":"HILAA","OrderDate":"1996-07-16 00:00:00","Freight":"81.9100","ShipName":"HILARI\u00d3N-Abastos"},{"OrderID":"11","CustomerID":"ERNSH","OrderDate":"1996-07-17 00:00:00","Freight":"140.5100","ShipName":"Ernst Handel"},{"OrderID":"12","CustomerID":"CENTC","OrderDate":"1996-07-18 00:00:00","Freight":"3.2500","ShipName":"Centro comercial Moctezuma"},{"OrderID":"13","CustomerID":"OLDWO","OrderDate":"1996-07-19 00:00:00","Freight":"55.0900","ShipName":"Ottilies K\u00e4seladen"},{"OrderID":"14","CustomerID":"QUEDE","OrderDate":"1996-07-19 00:00:00","Freight":"3.0500","ShipName":"Que Del\u00edcia"},{"OrderID":"15","CustomerID":"RATTC","OrderDate":"1996-07-22 00:00:00","Freight":"48.2900","ShipName":"Rattlesnake Canyon Grocery"},{"OrderID":"16","CustomerID":"ERNSH","OrderDate":"1996-07-23 00:00:00","Freight":"146.0600","ShipName":"Ernst Handel"},{"OrderID":"17","CustomerID":"FOLKO","OrderDate":"1996-07-24 00:00:00","Freight":"3.6700","ShipName":"Folk och f\u00e4 HB"},{"OrderID":"18","CustomerID":"BLONP","OrderDate":"1996-07-25 00:00:00","Freight":"55.2800","ShipName":"Blondel p\u00e8re et fils"},{"OrderID":"19","CustomerID":"WARTH","OrderDate":"1996-07-26 00:00:00","Freight":"25.7300","ShipName":"Wartian Herkku"},{"OrderID":"20","CustomerID":"FRANK","OrderDate":"1996-07-29 00:00:00","Freight":"208.5800","ShipName":"Frankenversand"}]
}
$("#jqGrid").jqGrid({
pager: "#jqGridPager",
datastr: data,
datatype: "jsonstring",
styleUI : 'Bootstrap',
colModel: [
{ label: 'OrderID', name: 'OrderID', key: true, width: 75 },
{ label: 'Customer ID', name: 'CustomerID', width: 150 },
{ label: 'Order Date', name: 'OrderDate', width: 150 },
{ label: 'Freight', name: 'Freight', width: 150 },
{ label:'Ship Name', name: 'ShipName', width: 150 }
],
viewrecords: true,
height: 250,
rowNum: 5,
autowidth: true,
shrinkToFit: true,
rownumbers: true,
gridview: false,
loadComplete: function () {
const parent_width = $("#jqGrid").parent().width();
$("#jqGrid").jqGrid('setGridWidth', parent_width);
}
});
});<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://www.guriddo.net/demo/css/trirand/ui.jqgrid-bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.guriddo.net/demo/js/trirand/i18n/grid.locale-en.js"></script>
<script src="http://www.guriddo.net/demo/js/trirand/src/jquery.jqGrid.js"></script>
<div>
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
</div>This problem is fixed and will be available in the next release. If this is a showstopper for you can get the fixed code from GitHub.
UPDATE: The code used in loadComplete can be avoided if you just set responsive option in jqGrid set to true. I recommend you to to consult the documentation here