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

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!