jqGrid with automatic height; but has a max height & scrollbars

Question

Is there any way to get jqGrid to adjust its height automatically to the number of rows; but when a certain height is reached that its height cannot increase anymore and that the vertical scrollbar apprears?

Thanks D

score 34 · Answer 1 · edited May 23 '17 at 11:53

34

I would recommend you to set "max-height" property on the bdiv of jqGrid and use height:'100%' or height:'auto':

$("#list").parents('div.ui-jqgrid-bdiv').css("max-height","300px");

The "max-height" property will be not used by IE6, but more recent web browsers will use it.

UPDATED: Free jqGrid introduce in version 4.10.0 new property: maxHeight which do exactly the same as above. Thus one can just use maxHeight: 300 instead of manual setting of max-height of the parent div.ui-jqgrid-bdiv.

edited May 23 '17 at 11:53

Community

1
1

answered May 05 '11 at 10:44

Oleg

220,925
34
403
798

Tried the above suggestions but it still did not work...also...I need a solution that will work in IE6 too. – Dieter May 05 '11 at 11:35
In which web browser exactly you tested and it didn't work? I recommend you **not support IE6** if it is possible. I mean that the grid will be good (but not perfect) displayed in IE6 because it will just ignore the CSS property. If you need to set height of IE6, then you will have to set grids **height** inside of `loadComplete`. You can use `getGridHeight` and `setGridHeight` methods. – Oleg May 05 '11 at 11:57
There is no such thing as getGridHeight...I suppose you meant getGridParam("height")...but using that in conjunction with loadComplete or gridComplete it does not return a height in pixels; instead it returns "auto"...and to answer the question stated first :) I'm testing it in IE9... – Dieter May 05 '11 at 13:59
3

@Dieter: To get the grid height in pixel you can use [jQuery.height](http://api.jquery.com/height/): `$("#list").parents('div.ui-jqgrid-bdiv').height()`. To get the full grid height including all headers you can use `$("#gbox_list").height()`. I wrote you about this in [my previous answer](http://stackoverflow.com/questions/5870057/resize-jqgrid-based-on-number-of-rows-grid-height/5870687#5870687) which includes even [the corresponding demo](http://www.ok-soft-gmbh.com/jqGrid/SimpleLocalGridHeight.htm). **To set** the grid height you can with the `setGridHeight` method. – Oleg May 06 '11 at 10:45
@Oleg just want to inform you that on JqGrid.Mobile, setting 'height' to '100%' will make the grid disappear on IE (Windows Phone 8) and Firefox (desktop). Did you ever run into it? – Shinigamae Jun 06 '13 at 10:00
@Shinigamae: Sorry, but I never tried JqGrid.Mobile. I've seen that trirand published beta version of the jqGrid.Mobile. It was more as 8 months before. I don't hear about release of it. – Oleg Jun 06 '13 at 10:16
are `#gbox_list` and `#list` still valid in `4.15.2 - free jqGrid`? I don't seem to be able to locate them. – AaA Jan 26 '20 at 05:26

score 12 · Answer 2 · answered Feb 21 '14 at 08:13

12

try this

jQuery("#yourid").jqGrid({  
    ........
    height:'auto'
});

answered Feb 21 '14 at 08:13

Attila Naghi

2,535
6
37
59

1

This will not constrain the height to a maximum as question is asking. – AaA Jan 26 '20 at 05:27

score 2 · Answer 3 · edited Jun 05 '15 at 12:32

Try these methods

1.define a height inside the grid

                        $("#griname").jqGrid(
                                {
                                    rowNum : 1000,
                                    viewrecords : true,
                                    gridview : true,
                                    autoencode : true,
                                    loadonce : true,
                                    width: "100%",
                                    height: 300,
                            });

2.this function can be used to keep the height fixed to a pre-defined value.

$(window).resize(function() {

if (typeof($gridname) !== 'undefined' && $("#gridname").length > 0) {
    $discrepanciesResultGrid.setGridHeight(
        $(window).height() - $("#gridname").position().top - 210
    );
    $gridname.setGridWidth($("body").width() - $("#anothercomponenetname").width() -    50);
    }

score 2 · Answer 4 · answered Feb 17 '17 at 07:05

2

.ui-jqgrid-view {
    max-height: 642px;
}
.ui-jqgrid-bdiv {
    overflow-y: scroll !important;
    max-height: 600px !important;
}

this work on my jqGrid

answered Feb 17 '17 at 07:05

lambdie

51
4

JayJay · Answer 5 · 2018-03-23T18:28:06.123

Our UI person solved the problem (expand the list up to 300px, if there are more than 10 attachments, show a vertical scrollbar) with css

#gview_list_Attachments .ui-jqgrid-bdiv{
    max-height: 300px;
    overflow-y: visible;
}

300px happens to be height of 10 items in our case. Of course using jquery you can determine the height of 1 item and multiply by 10. But this solution was quick, simple and solved our problem.

score 0 · Answer 6 · edited Sep 27 '12 at 18:07

0

Add this:

var height = $(window).height();
$('.ui-jqgrid-bdiv').height(height);

after loading jqgrid on your desired page, this worked for me.

edited Sep 27 '12 at 18:07

Gung Foo

13,392
5
31
39

answered Aug 26 '12 at 04:35

score 0 · Answer 7 · edited Jun 22 '15 at 07:19

0

Try this

 $("#list1").parents(".ui-jqgrid-bdiv").css('height', jQuery("#list1").css('height'));

This code will adjust height of grid according to the Number of rows in a grid

edited Jun 22 '15 at 07:19

Mo.

26,306
36
159
225

answered Jun 22 '15 at 07:02

yogesh Dhale

1

score 0 · Answer 8 · answered Jun 12 '18 at 05:51

0

I fixed it by using height attribute of the jqgrid as 30% (height:'30%') and the following css:

.ui-jqgrid-bdiv {
                min-height:150px;
        }

answered Jun 12 '18 at 05:51

user3224132

1

score 0 · Answer 9 · edited Jan 09 '20 at 20:51

0

Depending on your need, you can use min-height, max-height, or height in a script on your view or page:

$(window).load(
    function () {
        $('.ui-jqgrid-bdiv').css("min-height", "150px");
    }
)

I use $(window).load() because it runs after all scripts have loaded.

edited Jan 09 '20 at 20:51

John Washam

4,073
4
32
43

answered May 07 '19 at 10:04

Zolfaghari

1,259
1
15
14

`ui-jqgrid-bdiv` is only height of the content of grid excluding grid header, column header and pager (footers). – AaA Jan 26 '20 at 05:55

jqGrid with automatic height; but has a max height & scrollbars

9 Answers9

Linked