Why my JqGrid shrinks every time when I call 'show()'?

I am trying to show a JqGrid on page every time I choose OPTION from the dropdown menu which consist of total three options(OPTION,TEXTUAL and VALUE). I am using show and hide so that I can hold the value entered by the user at least for the time he is on that page. When the page loads with OPTION already selected on the dropdown menu then the table is showing and working fine, even after switching to other options which results in hiding of table and then making it back to OPTION, still it is working fine. The issue comes when I the page loads with selected option TEXTUAL or VALUE. When I change the option to OPTION it shrinks my jqGrid. And when I move chrome browser by selecting it from Toolbar, then it automatically fixes it.

<div class="row table-responsive">
 <div class="col-md-12">
  <div class="row">
   <div class="col-md-12">
    <div class="jqGrid" style="display:block">
     <table id="OptionTable"></table>
     <div id="divOptionTable"></div>
    </div>
   </div>
 </div>
</div>
</div>

Script to hide and show jqGrid

if($("#dropdownmenu").val()=="Option")
          {             
             $(".jqGrid").show();
          }
    else
          {
             $(".jqGrid").hide();
          }
        });

MY JQGrid code:

$("#OptionTable").jqGrid({
                mtype: "GET", 
                url: "---url---",
                datatype: "json",
                async: false,
                colNames: [
                   "col0", "col1", "col2"
                ],
                colModel: [
                    { key: true, name: "col0", index: "col0", editable: false, hidden: true },
                    { key: false, name: "col1", index: "col1", editable: false, hidden: false },
                    { key: false, name: "col2", index: "col1", editable: false, hidden: true }
                ],
                pager: jQuery("#divOptionTable"),
                rowNum: -1,
                scroll: 0,
                height: $(window).innerHeight() - 450,
                width: '100%',
                viewrecords: true,
                caption: "---caption---",
                emptyrecords: "No records",
                jsonReader: {
                    root: "rows",
                    page: "page",
                    total: "total",
                    records: "records",
                    repeatitems: false
                },
                autowidth: true,
                loadonce: false,
                gridview: true,
                multiselect: false,
                onSelectRow: function (id, status, e) {},
                beforeProcessing: function (data, status, xhr) {},
                ajaxGridOptions: { cache: false },
                gridComplete: function () { },
                ondblClickRow: function () { }
            });

By shrink this is what is mean:

from Why my JqGrid shrinks every time when I call 'show()'?