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

Brimstone

Answer 1

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.

Infold

Tried the above suggestions but it still did not work...also...I need a solution that will work in IE6 too. – Brimstone

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. – Infold

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... – Brimstone

@Dieter: To get the grid height in pixel you can use jQuery.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 which includes even the corresponding demo. To set the grid height you can with the setGridHeight method. – Infold

@Infold 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? – Tonality

@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. – Infold

are #gbox_list and #list still valid in 4.15.2 - free jqGrid? I don't seem to be able to locate them. – Clipping

Answer 2

try this

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

Currant

This will not constrain the height to a maximum as question is asking. – Clipping

Answer 3

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);
    }

Pico

Answer 4

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

this work on my jqGrid

Fowl

Answer 5

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.

Discalced

Answer 6

Add this:

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

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

Jumpy

Answer 7

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

Hephzipa

Answer 8

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

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

Selflove

Answer 9

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.

Udo

ui-jqgrid-bdiv is only height of the content of grid excluding grid header, column header and pager (footers). – Clipping