web-dev-qa-db-ja.com

剣道UIグリッドの高さをラッパーの100％に設定

APIを介して剣道UIグリッドの固定高さを設定する簡単な方法があることは知っていますが、特定のニーズのために、ラッパーの完全な高さでグリッドを拡張する必要があります。

次のマークアップ構造を使用して、.wrapperをheight:600pxに設定し、.k-grid-contentheight:100%を指定しようとしましたが、拡張されません。 #gridはheight:100%で100％に拡張されますが、内部のコンテンツも拡張する必要があります。どうすればそれを達成できますか？

これがデモです JS BIN

<div class="wrapper">
    <div id="grid">
        <div class="k-grid-header"></div>
        <div class="k-grid-content"></div>
        <div class="k-grid-pager"></div>
    </div>
</div>
javascriptjquerykendo-uikendo-grid
12
Seong Lee

剣道のテクニカルサポートチームの1人によると、ディモ・ディモフ。 1つのコンテナの高さを設定し、内部のすべてを100％（グリッドを含む）に設定する必要があります。次に、ドキュメントのコンテンツの高さを手動で調整し、ウィンドウのサイズを変更します。

彼の例はこちらをご覧ください：

http://jsfiddle.net/dimodi/SDFsz/

ラッパーの高さをウィンドウの高さに設定するjs関数で更新されたものについては、こちらをご覧ください。

http://jsbin.com/yumexugo/1/edit

基本的に、コンテンツのサイズは次のように変更されます。

function resizeGrid() {
    var gridElement = $("#grid"),
        dataArea = gridElement.find(".k-grid-content"),
        gridHeight = gridElement.innerHeight(),
        otherElements = gridElement.children().not(".k-grid-content"),
        otherElementsHeight = 0;
    otherElements.each(function(){
        otherElementsHeight += $(this).outerHeight();
    });
    dataArea.height(gridHeight - otherElementsHeight);
}

ラッパーのサイズは次のとおりです（レイアウトに合わせてこれを変更する必要がある場合があります）。

function resizeWrapper() {
    $("#outerWrapper").height($('#body').innerHeight());
}

ドキュメントの準備とウィンドウのサイズ変更の両方の呼び出し：

$(window).resize(function() {
    resizeWrapper();
    resizeGrid();
});

関連するCSS：

#grid {
  height: 100%;
}

#outerWrapper{
  overflow: hidden;
}
21
MattOG

あなたは2つのことをしなければなりません。

  1. ページのサイズ変更時に$('.k-grid table')の高さを調整します
  2. グリッドのdataBoundメソッドの$('.k-grid table')高さを調整します

JsBinで確認してください http://jsbin.com/xorawuya/1/edit

  $(window).resize(function() {
    var viewportHeight = $(window).height();
    $('#outerWrapper').height(viewportHeight);
    $('.k-grid table').height(viewportHeight-150);
  });

そしてここにも

  dataBound: function(e) {
    $('.k-grid table').height($(window).height()-150);
  },

150差し引いているのは、ウィンドウの高さからグリッドヘッダー/フッターの高さを引いたものです。これは、Webサイトのレイアウトとは異なる場合があります。それに応じて調整してください。

2
SajithNair

グリッドだけでなく、その上の他のコンテンツという意味で、HTMLが異なる場合に機能する別のソリューションを作成しました。 JSFiddle はここにあります。

[〜＃〜] html [〜＃〜]

<div class="container">
  <div class="test">
    hey there
  </div>
  <div id="grid"></div>
</div>

[〜＃〜] css [〜＃〜]

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.container{
  height:100%;
}
.test{
  height:100px;
}
html {
  overflow: hidden;
}

[〜＃〜] js [〜＃〜]

function resizeGrid() {
  var gridElement = $("#grid");
  var dataArea = gridElement.find(".k-grid-content");
  var newHeight = gridElement.parent().innerHeight() - 2 -calcHeightsOfParentChildren(gridElement);
  var diff = gridElement.innerHeight() - dataArea.innerHeight();
  if((newHeight-diff)>0){
    gridElement.height(newHeight);
    dataArea.height(newHeight - diff);
  }
}

function calcHeightsOfParentChildren(element){
    var children = $(element).parent().children();
  var height = 0;
  $.each(children, function( index, value ) {
    if($(value).attr("id") != $(element).attr("id")){
        height = height + $(value).height();
    }
    });
    return height;
}

$(window).resize(function() {
  resizeGrid();
});

$("#grid").kendoGrid({
  dataSource: {
    type: "odata",
    transport: {
      read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
    },
    schema: {
      model: {
        fields: {
          OrderID: {
            type: "number"
          },
          ShipName: {
            type: "string"
          },
          ShipCity: {
            type: "string"
          }
        }
      }
    },
    pageSize: 10,
    serverPaging: true,
    serverFiltering: true,
    serverSorting: true
  },
  height: 250,
  filterable: true,
  sortable: true,
  pageable: true,
  dataBound: resizeGrid,
  columns: [{
      field: "OrderID",
      filterable: false
    },
    "ShipName",
    "ShipCity"
  ]
});

私のソリューションの鍵は、変更されたresizeGrid関数です。この変更なしで何が起こるかは、ユーザーが一番下のページャーを十分に上にスクロールすると失われることです！ newHeight-diffが0より大きいことを確認することにより、このエラーを防ぎます。

問題のグリッドの要素が渡されると、2番目のcalcHeightsOfParentChildrenは、ページャーコントロールとグリッドを配置するための正しい差を計算し、100％を占めて100％の比率を維持するために、高さを除く他のすべての高さを計算します。

1
Joseph Astrahan

IE8を使用している人を気にしない場合は、次の方法が適しています。

/* FULL HEIGHT GRID */
.k-grid.k-grid-stretch-height-full {
    height: calc(100% - 90px) !important;
}
.k-grid.k-grid-stretch-height-full .k-grid-content {
    height: calc(100% - 103px) !important;
}
.k-grid.k-grid-stretch-height-nogroup {
    height: calc(100% - 90px) !important;
}
.k-grid.k-grid-stretch-height-nogroup .k-grid-content {
    height: calc(100% - 72px) !important;
}
.k-grid.k-grid-stretch-height-simple {
    height: calc(100% - 90px) !important;
}
.k-grid.k-grid-stretch-height-simple .k-grid-content {
    height: calc(100% - 37px) !important;
}

k-grid-stretch-height-AXZサイドのクラスk-gridとピクセル数で遊ぶ。

0
Salar