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!

Answer 1

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

Answer 2

You might use this one it looks nicer:

$("#mygrid").closest(".ui-jqgrid-bdiv").css({ 'overflow-y' : 'scroll' });

It works for me using IE8 and FF (click at the text)

jsbin-Demo

Answer 3

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!

Answer 4

Did you try jQgrid 3.6 beta, it has a lot new features like: True scrolling Rows I think, that this is solution for you.

Demo of new features: http://www.trirand.com/jqgrid/jqgrid36/jqgrid.html

Alsow there is new metod added: gridResize method which can resize the grid. http://github.com/tonytomov/jqGrid/commit/a008ebf7b8ad684b21e51f21eed4301b82bc66f2