jqGrid - Is there a way to always display a vertical scrollbar?

Question

My application has several jqGrids that may or may not contain enough rows to require a vertical scrollbar. But rows may be dynamically added to these grids after they have been created, so that a grid may eventually require a scrollbar.

The problem is that if the grid does not have enough rows to require a scrollbar, there is empty space on the right-hand side of the grid. I would like to fix this somehow - either always display the vertical scrollbar, or somehow dynamically add it when necessary.

I tried adding the following CSS to the grid's .ui-jqgrid-bdiv div:

overflow-y: scroll;

Using the following jQuery (the code is ugly, I know):

$("#mygrid").closest(".ui-jqgrid-bdiv").attr("style",
$("#mygrid").closest(".ui-jqgrid-bdiv").attr("style") + " overflow-y: scroll; ");

This works fine on Firefox and Chrome, but on IE the grid never displays the scrollbar (no matter how many rows I add, they are added to the bottom of the grid and a vertical scrollbar never appears).

Any help is appreciated!

Solution 1

overflow-y is CSS3, and it's not yet fully supported by IE (sigh...)

So, I guess the only 2 CSS things you can do about this, without any other markup involved, is to use either overflow: auto (which will let the browser decide) or overflow: scroll, which will force both the vertical AND the horizontal scrollbars.

A workaround may be to wrap the whole grid in a bigger div with a min-height, so you set that equal to the browsers window + 1px. That way you'll force a vertical scrollbar.

Setting a min-height may be tricky to do in all browsers, but I found this works great in most of them.

.the-wrapper{
  height: auto !important; /* for real browsers*/
  height: 601px;           /* IE6 will use this a min-height. Use any height you need - you can even set this using JavaScript depending on the browser window height */
  min-height: 601px;       /* for real browsers - same value as height */
}

Of course, this will add some space below the grids. Welcome aboard!

Solution 2

Have you set the height property on the grid? IE can get grumpy with scrollbars if no height is set.

Solution 3

There is a scrollOffset option for the jqGrid.

Set it to zero and the empty space goes away.

Comments

[Bob Aman]

This is exactly what I was going to recommend. I'd +1 if I had any votes left.

[tmsppc]

Hi Bob, thanks anyway :) But I wouldn't mind if you came back tomorrow :P

[Justin Ethier]

Right, the trouble is that the scroll bar is necessary if there are more rows than can be displayed - but the grid cannot know this until after the data has been retrieved. But once the grid is constructed the scrollOffset option cannot be changed, according to: trirand.com/jqgridwiki/doku.php?id=wiki:options