Make jqGrid fill parent without losing its horizontal scrollbar?

Question

How can I get my (first) jqGrid to fill its parent container without losing its horizontal scrollbar by putting it too far down? (The scrollbar being the one created by the scroll: 1 option, e.g., "virtual scrolling".) It seems to use the height I give it without allowing for the scrollbar, and so the scrollbar ends up past the bottom of the area I'm trying to keep it in. I've seen these two questions about resizing the grid (and their answers), but while useful (they got me this far), they don't address the scrollbar problem.

The page's layout looks like this (it's not mine; I might be able to get it changed, but it would best if I could avoid that — with the exception that I can do just about anything I want with gridWrapper):

HTML:

<body>
  <div id="pageHeader">Header section</div>
  <div id="pageBody">
    <div id="gridWrapper" style="height: 100%">
    </div>
  </div>
  <div id="pageFooter">Footer section</div>
</body>

CSS:

body {
  margin: 0;
  padding: 0;
  font-family: verdana, sans-serif;
}
#pageHeader {
  width: 100%;
  height: 99px;
  border-bottom: solid 1px #ccc;
}
#pageBody {
  background-color: #fff;
  position: fixed;
  top: 100px;
  bottom: 45px;
  left: 0;
  right: 0;
}
#pageFooter {
  background-color: #eee;
  position: fixed;
  left: 0; 
  right: 0;
  bottom: 0;
  height: 44px;
  border-top: solid 1px #ccc;
}

My grid creation/sizing code looks like this (you can tell it's testing/prototyping code):

function createGrid(data) {
  var colNames, colModel, index, grid, gridParent, theFudge, heightFudge = 0;

  colNames = [
    "One", "Two", "Three", "Four", "Five",
    "Six", "Seven", "Eight", "Nine", "Ten",
    "Eleven", "Twelve", "Thirteen", "teen", "Fifteen",
    "Sixteen", "Seventeen", "Eightteen", "Nineteen", "Twenty",
    "Twenty One", "Twenty Two", "Twenty Three", "Twenty Four",
    "Twenty Five"
  ];
  colModel = [];
  for (index = 0; index < colNames.length; ++index) {
    colModel.push({
      name:   "col" + index,
      id:     "col" + index,
      width:  75
    });
  }

  gridParent = $("#gridWrapper");
  grid = $('<table id="theTable"></table>').appendTo(gridParent);
  grid.jqGrid({
    datatype:    'local',
    data:        data,
    height:      gridParent.height() - heightFudge,
    width:       gridParent.width(),
    shrinkToFit: false,
    colNames:    colNames,
    colModel:    colModel,
    rownumbers:  true,
    rownumWidth: 75,
    scroll:      1
  });

  $(window).resize(resizeGrid);

  function resizeGrid() {
    grid.jqGrid('setGridWidth', gridParent.width());
    grid.jqGrid('setGridHeight', gridParent.height() - heightFudge);
    grid.trigger('reloadGrid');
  }
}

You see that heightFudge value (which in the above is just 0). If I don't fudge the height, the scrollbar is beyond the bottom of pageBody, intruding on (and being hidden by) pageFooter. On my browser with my fonts and my window decorations etc., etc., etc., the fudge factor (height of the scrollbar) is 24 pixels. But of course that will vary.

How can I get the grid to fill the grid wrapper and keep its horizontal scrollbar within the height I give it? (Or how can I reliably determine the fudge factor at runtime, but that seems kludgy to me.)

Here's a live copy of the above (source link), with data for the table and controls for experimenting with the fudge and such.

score 2 · Accepted Answer · edited Sep 13 '13 at 08:01

2

The height parameter of jqGrid can be used to specify the height of inner part of grid (the height of the body). It seems to me that you can fix the problem by modifying of resizeGrid to about the following

function resizeGrid() {
  var $grid = $("#theTable"),
      $gbox = $grid.closest(".ui-jqgrid"), // or $("gbox_theTable");
      outerHeight = $gbox.height() - $grid.jqGrid('getGridParam', 'height');
  $grid.jqGrid('setGridWidth', gridParent.width());
  $grid.jqGrid('setGridHeight', gridParent.height() - heightFudge - outerHeight);
  $grid.trigger('reloadGrid');
}

You have to call resizeGrid to fix its height immediately after the grid is created. You can see the fixed demo here.

edited Sep 13 '13 at 08:01

TecHunter

6,091
2
30
47

answered Apr 12 '12 at 15:09

Oleg

220,925
34
403
798

Of course, I should have thought of measuring the resulting element after-the-fact (I did think of it later, when dealing with allowing column headers to be as tall as needed; but was going about it a more awkward way than yours). Many thanks!! JSBin update here: [live](http://jsbin.com/oworex/2) | [source](http://jsbin.com/oworex/2/edit). – T.J. Crowder Apr 12 '12 at 15:41
@T.J.Crowder: You are welcome! I agree that `outerHeight` which I used can be wrong interpreted. – Oleg Apr 12 '12 at 15:45
And actually, I only need to do it once, not on every resize. But again, the concept was spot-on (and probably solves a second problem for me). Further update: [live](http://jsbin.com/oworex/3) | [source](http://jsbin.com/oworex/3/edit) – T.J. Crowder Apr 12 '12 at 15:56
@T.J.Crowder: You are right in the most cases, but if you would call some methods of jqGrid which change the "outer" part of grid you have to recalculate the `heightFudge` value. For example with respect of `filterToolbar`, which I would recommend you, you can include filter toolbar in the grid. With respect of [setGroupHeaders](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:groupingheadar) you can insert grouping headers. Moreover in some scenarios one uses wrapping column headers (see [here](http://stackoverflow.com/a/7256972/315935)) and the user can resize the column size. – Oleg Apr 12 '12 at 16:10

Make jqGrid fill parent without losing its horizontal scrollbar?

1 Answers1