web-dev-qa-db-fra.com

jqGrid avec hauteur automatique; mais a une hauteur maximale et des barres de défilement

Est-il possible d'obtenir que jqGrid ajuste automatiquement sa hauteur en fonction du nombre de lignes; mais quand une certaine hauteur est atteinte que sa hauteur ne peut plus augmenter et que la barre de défilement verticale apprear?

Merci: D

jqueryjqgrid
24
Dieter

Je vous recommande de définir la propriété "max-height" sur le bdiv de jqGrid et d'utiliser height:'100%' ou height:'auto':

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

La propriété "max-height" sera non utilisée par IE6 , mais les navigateurs Web les plus récents l'utiliseront.

UPDATED: Free jqGrid introduit dans la version 4.10.0 une nouvelle propriété: maxHeight qui fait exactement comme ci-dessus. Ainsi, on peut simplement utiliser maxHeight: 300 au lieu du réglage manuel de max-height du parent div.ui-jqgrid-bdiv.

31
Oleg

essaye ça 

jQuery("#yourid").jqGrid({  
    ........
    height:'auto'
});
12
Chester
.ui-jqgrid-view {
    max-height: 642px;
}
.ui-jqgrid-bdiv {
    overflow-y: scroll !important;
    max-height: 600px !important;
}

ce travail sur mon jqGrid

2
lambdie

Essayez ces méthodes

1.définir une hauteur à l'intérieur de la grille 

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

Cette fonction peut être utilisée pour maintenir la hauteur fixée à une valeur prédéfinie.

$(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);
    }
2
shermi

Notre personne de l'interface utilisateur a résolu le problème (développez la liste jusqu'à 300 pixels, s'il y a plus de 10 pièces jointes, affichez une barre de défilement verticale) avec css

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

300px se trouve être la hauteur de 10 éléments dans notre cas. Bien sûr, en utilisant jQuery, vous pouvez déterminer la hauteur d’un élément et le multiplier par 10. Mais cette solution était simple et rapide et a résolu notre problème.

1
JayJay

Essaye ça

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

Ce code ajustera la hauteur de la grille en fonction du nombre de lignes dans une grille

0
yogesh Dhale

Ajoute ça: 

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

après avoir chargé jqgrid sur la page de votre choix, cela a fonctionné pour moi.

0
user1364237

Je l'ai corrigé en utilisant l'attribut height de jqgrid à 30% (height: '30% ') et le CSS suivant

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

0
user3224132