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 t

Solution 1:

Just a random guess (since it could be so many things) but that $(window).innerHeight might be the issue. If the grid generates on page layout, without any content, it might give you a different results depending on your initial page content and on the state of the element. According to the documentation you should use clientHeight instead. Along with that the Jquery documentation also mentions that using innerHeight on an invisible element might give incorrect results.

However overall that's not really the way to do it.

body {
  display: flex;
  flex-flow: column nowrap;
  min-height: 100vh;
  margin: 0;
}

...

.parent {
  flex: 1 1 auto;
  display: flex;
}

.child {
  flex: 1 1 auto;
}

...

.grid {
  flex: 1 1 auto;
  display: flex;
  // height: calc(100vh - 450px);
}

Remove all the jquery height and width stuff from that element if possible and replace it with flex (if you're able).

Solution 2:

$("#tblSurveyOption").jqGrid('setGridWidth',  $(window).innerWidth());

I don't know there is a bug may be. I used this function at the end of JQGrid function and this works fine.