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!
For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.
A horizontal scroll bar enables the user to scroll the content of a window to the left or right. A vertical scroll bar enables the user to scroll the content up or down.
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!
Have you set the height property on the grid? IE can get grumpy with scrollbars if no height is set.
There is a scrollOffset
option for the jqGrid.
Set it to zero and the empty space goes away.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With