web-dev-qa-db-ja.com

自動高さのjqGrid。しかし、最大の高さとスクロールバーがあります

行数に合わせてjqGridの高さを自動的に調整する方法はありますか。しかし、特定の高さに達すると、その高さがそれ以上増加せず、垂直スクロールバーが出現しますか？

ありがとう

jqueryjqgrid
25
Dieter

JqGridの bdiv で"max-height"プロパティを設定し、height:'100%'またはheight:'auto'を使用することをお勧めします。

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

"max-height"プロパティは IE6では使用されません になりますが、最近のWebブラウザーでは使用されます。

UPDATED：無料のjqGridでは、バージョン4.10.0で新しいプロパティmaxHeightが導入されました。これは上記とまったく同じです。したがって、親maxHeight: 300のmax-heightを手動で設定する代わりに、div.ui-jqgrid-bdivを使用できます。

32
Oleg

これを試して

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

これは私のjqGridで動作します

2
lambdie

これらの方法を試してください

1.グリッド内の高さを定義する

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

2.この関数は、高さを事前定義された値に固定するために使用できます。

$(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

UI担当者は、cssを使用して問題を解決しました（10を超える添付ファイルがある場合、リストを最大300ピクセルまで拡大し、垂直スクロールバーを表示します）

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

私たちの場合、300pxはたまたま10個のアイテムの高さです。もちろん、jqueryを使用すると、1アイテムの高さを決定し、10を掛けることができます。しかし、この解決策は迅速かつ簡単で、問題を解決しました。

1
JayJay

これを試して

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

このコードは、グリッドの行数に従ってグリッドの高さを調整します

0
yogesh Dhale

これを追加：

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

目的のページにjqgridをロードした後、これはうまくいきました。

0
user1364237

必要に応じて、min-hight、max-height、またはheightをビューまたはページのスクリプト部分で以下のコードとして使用できます。

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

すべてのスクリプトの後にロードするため、$（window）.load（を使用します。

0
Zolfaghari

Jqgridのheight属性を30％（height：'30％ '）および次のcssを使用して修正しました。

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