Remove horizontal scrollbar from jqGrid

Question

Hi I have responsive UI where I am using a jqGrid. In this, when I open it in full-screen the grid works fine. Now, when I try to resize it, horizontal scrollbar comes. Like this

Now, I referred the internet there are different solutions for this problem and I tried almost whatever I have got my hand on.

I have tried this link jqGrid horizontal scrollbar But here it hides the last columns

I have checked this also - JQGrid How do I removed the annoying horizontal scrollbar when autowidth = true? (In IE) but this was not my case

I have checked this link also - How to get rid of horizontal scroll bar when not needed And the new one where we are getting rid of scrollbar in chrome jqGrid does not render correctly in Chrome/Chrome Frame

I have considered this also - http://www.trirand.com/blog/?page_id=393/help/horizontal-scrollbar

I have applied following properties -

  shrinkToFit: true,
  autowidth:true

My css properties are

 .ui-jqgrid {
  max-width: 100% !important; width: auto !important;}
  .ui-jqgrid .ui-jqgrid-pager {
  width: auto !important;
  }
  .ui-jqgrid-bdiv {
  overflow-y: scroll !important;
  }

  .ui-jqgrid-view,.ui-jqgrid-hdiv,.ui-jqgrid-bdiv {
  width: auto !important;
  }
  .ui-th-ltr, .ui-jqgrid .ui-jqgrid-htable th.ui-th-ltr {
  text-align:center;
  font-style:normal;
  }
  .ui-th-ltr, .ui-jqgrid .ui-jqgrid-htable th.ui-th-ltr > em {
  font-style: normal;
  }

I have tried this solution also

  .ui-jqgrid .ui-jqgrid-btable
  {
  table-layout:auto;
  }

I have also commented out this-

  .ui-widget :active { outline: none; }

Note: I am using IE 11. I want jqGrid to everytime it should calculate the width when user resize the screen so that there will not be horizontal scrollbar

EDITED : I ma using license jqGrid 4.1.2. Its a free version only.

Also, I am using a function here which resize according to browser window

/* Resize grid on browser window */

 function resizeJqGridWidth(grid_id, div_id, width) {
  var cnt = 0;
  $(window).bind('resize', function () {

  }).trigger('resize');

  }

and I am calling it like

 resizeJqGridWidth(grid_id, "gview_" + grid_id, "90%");

My code :

 var grid_data = data,
  grid = $("#" + grid_id);
grid.jqGrid({
            datatype: "jsonstring",
            datastr: grid_data,
            colNames: scopes.grid_header_column_value,
            colModel: scopes.gridcolumns,
            height: height,
            //gridview: true,          
            loadonce: true,
            viewrecords: is_pager_enable,
            rowList: row_list,
            rowNum: row_number,
            multiSort: true,
            ignoreCase: true,
            grouping: is_group_enable,
            sortorder: sort_order,
            cmTemplate: { autoResizable: true },
            autoresizeOnLoad: true,
            autoResizing: { compact: true, resetWidthOrg: true },
            sortable: false,
            pager: "#" + pager_id,
            treeGrid: true,
            treeGridModel: 'adjacency',
            treedatatype: "local",
            ExpandColumn: 'name',
           // sortname: 'name',          
            jsonReader: {
                repeatitems: false,
                root: function (obj) { return obj; },
                page: function () { return 1; },
                total: function () { return 1; },
                records: function (obj) { return obj.length; },
                expanded_field: "true"
            },
            gridComplete: function () {

                $("#" + grid_id+"count").html($("#" + grid_id).getGridParam('records')+" row(s)");

            },

            loadComplete: function () {
                var ts = this;
                //document.querySelector('#filterbutton').addEventListener('onclick', clickqw);
                if (ts.p.reccount === 0) {
                    $(this).hide();
                    emptyMsgDiv.show();
                } else {
                    $(this).show();
                    emptyMsgDiv.hide();
                }

            }            
        });

Added code for opening popup - Here I used to call a funtion getPopup which is then do necessary thing to load a modal window.

if (formatter == "Link") {

                    var subpopup = grid_row_data[j]._attr.popupid._value;
                    var xmlname = grid_row_data[j]._attr.popxml._value;
                    formatter= 'dynamicLink';
                    formoption= {
                            url: function (cellValue, rowId, rowData) {
                                return '/' + rowId + '?' + $.param({
                                tax: rowData.col_nigo,
                                invdate: rowData.col_klo,
                                closed: rowData.col_phq
                            });
                        },
                        cellValue: function (cellValue, rowId, rowData) {
                            return  '<span class="pointer">' + cellValue + '</span>'; 
                            },
                        onClick: function (rowId, iRow, iCol, cellValue, e) {
                            $("#"+subpopup).css("display", "block");
                            $("#" + popupid).css("opacity", "0.99");
                            $scope.getPopup(rowId, iRow, iCol,gridid ,xmlname,rowId);                      
                        }
                    };
                    cellattr = function (rowId, cellValue, rawObject) {
                        var attribute = ' title="' + rawObject.name;
                        if (rawObject.closed) {
                            attribute += ' (closed)';
                        }
                        return attribute + '"';
                    };
                }
            }