Geek Answers Handbook

JqGrid - Is there a way to always show a vertical scrollbar?

My application has several jqGrids, which may or may not contain enough lines to require a vertical scrollbar. But rows can be dynamically added to these grids after they are created, so the grid may ultimately require a scrollbar.

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

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

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 in Firefox and Chrome, but in IE the grid never displays the scroll bar (no matter how many lines I add, they are added to the bottom of the grid, and the vertical scroll bar never appears).

Any help is appreciated!

+7
jquery scrollbar jqgrid
source share
4 answers

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

So, I think that only two CSS things that you can do about this, without any other markup, should use either overflow: auto (which will allow the browser) or overflow: scroll , which will cause the vertical And horizontal scrollbars.

A workaround may be to wrap the entire grid in a larger div with a minimum height, so you set the browser window to + 1px. This way you create a vertical scrollbar.

Setting the minimum height can be a daunting task in all browsers, but I found that it works fine 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!

+14
source share

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

+1
source share

For jqGrid there is a scrollOffset option.

Set it to zero and the empty space will disappear.

+1
source share

You tried jQgrid 3.6 beta, it has a lot of new features: True scrolling Rows I think this solution is for you.

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

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

0
source share

More articles:


All Articles