CODEWITHSUNDEEP
jqueryjqgrid
Dieter
Dieter

Reputation: 331

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

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

Upvotes: 26

Views: 80209

Answers (9)

Zolfaghari
Zolfaghari

Reputation: 1323

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.

Upvotes: 0

user3224132
user3224132

Reputation: 1

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

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

Upvotes: 0

JayJay
JayJay

Reputation: 592

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.

Upvotes: 1

lambdie
lambdie

Reputation: 51

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

this work on my jqGrid

Upvotes: 2

Oleg
Oleg

Reputation: 221997

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.

Upvotes: 34

yogesh Dhale
yogesh Dhale

Reputation: 1

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

Upvotes: 0

shermi
shermi

Reputation: 149

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

Upvotes: 2

Attila Naghi
Attila Naghi

Reputation: 2686

try this 

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

Upvotes: 12

user1364237
user1364237

Reputation:

Add this: 

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

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

Upvotes: 0

Related Questions