jqGrid with automatic height; but has a max height

问题:

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

回答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.

回答2:

try this

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

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

回答4:

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

this work on my jqGrid

回答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.

回答6:

Add this:

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

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

回答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

回答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;
        }