title: How can i get jqgrid frozen columns to work with word wrap on
body: <p>I am using the latest jqgrid 4.3.1 and i am trying to use frozen columns.  </p>
  
  <p>The issue is that i have overridden the default css to support word wrap (css solution can be seen <a href="https://stackoverflow.com/questions/2994343/how-to-implement-wordwrap-on-jqgrid-which-works-on-ie7-ie8-and-ff">in this question</a>) in jqgrid and i think that is the reason that the frozen columns don't line up correctly with the regular columns. The heights of the frozen rows are not the same as teh heights of the rest of the grid.  Here is a screenshot.. the frozen columns are highlighted in the red box (NOTE: i crossed out the content given its not a public site:</p>
  
  <p>Is there anyway to have frozen columns line up with word wrapped cells in jqgrid</p>
  
  <p><img src="https://i.stack.imgur.com/8MBsr.png" alt="enter image description here"></p>
  
  <p>NOTE: after trying Oleg's solution below, it works in Firefox but in IE8 I don't see the horizontal scroll bar (see pic)</p>
  
  <h2>Firefox:</h2>
  
  <p><img src="https://i.stack.imgur.com/ELSGh.png" alt="enter image description here">  </p>
  
  <h2>IE: (notice no horizontal scroll bar)</h2>
  
  <p><img src="https://i.stack.imgur.com/oCpQu.png" alt="enter image description here"></p>
  
  <h2>NOTE:</h2>
  
  <p>To help answer Oleg's question, here is a dump of my jqgrid Setup:</p>
  
  <pre><code>jQuery(gridSelector).jqGrid({
      mtype: 'POST',
      toppager: true,
      url: siteRoot + controller + "/" + gridDataName + "?" + querystring,
      datatype: "json",
      colNames: names,
      colModel: model,
    shrinkToFit: false,
  
      imgpath: siteRoot + "Scripts/jqGrid431/themes/steel/images",
      rowNum: 20,
      rowList: [10, 20, 50, 999],
      altRows: true,
      altclass: "altRow",
      jsonReader: {
          root: "Rows",
          page: "Page",
          total: "Total",
          records: "Records",
          repeatitems: false,
          id: "Id"
      },
      search: true,
      postData: (myfilter) ? { filters: JSON.stringify(myfilter)} : {},
      //postData:  { filters: JSON.stringify(myfilter) },
      pager: pagerSelector,
      height: "auto",
      sortname: sortCol,
      viewrecords: true,
      sortorder: sortDirection,
      beforeRequest: function () {
  
          var grid = jQuery(gridSelector);
          if (gridprefs &amp;&amp; gridprefs.filter) {
              grid.setPostDataItem('_search', true);
              for (var prop in gridprefs.filter) {
                  var value = eval('gridprefs.filter.' + prop);
                  if ('' + value != '') {
                      grid.setPostDataItem(prop, value);
                  }
              }
  
              grid.setPostDataItem('sidx', gridprefs.scol);
              grid.setPostDataItem('sord', gridprefs.sord);
              grid.setPostDataItem('page', gridprefs.page);
              grid.setPostDataItem('rows', gridprefs.rows);
              grid.jqGrid('setGridParam', {
                  sortname: gridprefs.scol,
                  sortorder: gridprefs.sord,
                  page: gridprefs.page,
                  rowNum: gridprefs.rows
              });
          }
      },
      loadComplete: function () {
  
          var newCapture = "", filters, rules, rule, op, i, iOp,
                      postData = jQuery(gridSelector).jqGrid("getGridParam", "postData"),
                      isFiltering = jQuery(gridSelector).jqGrid("getGridParam", "search");
  
          if (isFiltering === true &amp;&amp; typeof postData.filters !== "undefined") {
              filters = $.parseJSON(postData.filters);
              newCapture = "Filter: [";
              rules = filters.rules;
              for (i = 0; i &lt; rules.length; i++) {
                  rule = rules[i];
                  op = rule.op;  // the code name of the operation
                  iOp = $.inArray(op, arOps);
                  if (iOp &gt;= 0 &amp;&amp; typeof $.jgrid.search.odata[iOp] !== "undefined") {
                      op = $.jgrid.search.odata[iOp];
                  }
                  newCapture += rule.field + " " + op + " '" + rule.data + "'";
                  if (i + 1 !== rules.length) {
                      newCapture += ", ";
                  }
              }
              newCapture += "]";
          }
          jQuery(gridSelector).jqGrid("setCaption", newCapture);
          fixPositionsOfFrozenDivs.call(this);
  
          $(gridSelector).supersleight({ shim: siteRoot + 'Content/Images/shim.gif' });
          if (gridprefs &amp;&amp; gridprefs.filter) {
              for (var prop in gridprefs.filter) {
                  $('#gs_' + prop).val(eval('gridprefs.filter.' + prop));
              }
              $(".ui-pg-selbox").val(gridprefs.rows);
              $(".ui-pg-input").val(gridprefs.page);
          }
          gridprefs = {};
      },
      editurl: siteRoot + controller + "/Update" + appendRoute,
      ondblClickRow: editable ?
          function (rowid) {
              jQuery(gridSelector).editGridRow(rowid, { width: 600 });
          } :
          function (rowid) { }
  });
  
  //$(gridSelector).jqGrid('navGrid', '#pager', { search: true, cloneToTop: true });
  $(gridSelector).jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true });
  
  jQuery(gridSelector).jqGrid('bindKeys', {});
  
  if (editable) {
      jQuery(gridSelector).navGrid(pagerSelector,
          { cloneToTop: true, refresh: false
          },
          { height: 380, width: 500, reloadAfterSubmit: true, closeAfterEdit: true, url: siteRoot + controller + "/Update", zIndex: 1100 },
          { height: 380, width: 500, reloadAfterSubmit: true, closeAfterAdd: true, url: siteRoot + controller + "/Add", zIndex: 1100 },
          { reloadAfterSubmit: true, url: siteRoot + controller + "/Delete" },
          { multipleSearch: true,
              beforeShowSearch: function($form) {
                  $('#searchmodfbox_' + $(gridSelector)[0].id).width(560);
              }
          });
  
  } else {
      jQuery(gridSelector).navGrid(pagerSelector,
          { cloneToTop: true, refresh: false, add: false, edit: false, del: false },
          { }, { }, { }, { multipleSearch: true,
              beforeShowSearch: function($form) {
                  $('#searchmodfbox_' + $(gridSelector)[0].id).width(560);
              }
          });
      }
  
      myAddButton(gridSelector, {
          caption: "",
          title: "Reload Grid",
          buttonicon: 'ui-icon-refresh',
          onClickButton: function () {
              $(gridSelector).trigger("reloadGrid");
          }
      });
  
  }
  </code></pre>