設置劍道網格高度可滾動自動最小高度最大高度

我知道這是一個經常討論的問題。無論如何，我想給它一個鏡頭：我正在使用多個kendo網格 - 所以我正在尋找一種可重複使用和乾淨的方式來設置網格樣式，而不會對彼此產生副作用。因此，這裏是我想達到的目標：網格樣式1： - 最小高度：150像素MAX-heigt：600px的滾動網格樣式2： - 最小高度：150像素MAX-heigt：300像素滾動設置劍道網格高度可滾動自動最小高度最大高度

隱而不宣這看起來很不尋常，是嗎？我試着設置html.attributes，設置scrollable（）高度並覆蓋css。但最後我總是發現自己有以下幾個問題，雖然：

網格內容的div溢出父DIV
沒有滾動條了
「固定」通過覆蓋CSS類有什麼不想要副作用當然

有沒有人有解決方案？

來源

2016-04-22 el_buck0

A [作用域樣式表（http://www.w3schools.com/tags/att_style_scoped.asp）會非常適合這類問題，但不幸的是它仍然只是一個僅由FireFox完全支持的實驗性功能。 – Padhraic

我有一個可能的解決方案，我修改了一些我使用的代碼。

independent grid height resizing

所以，讓我們看你的魔力位：你希望能夠動態地和彼此獨立的改變scrollable區域

 function resizeGrid(grid, size, fixed, minHeight, minSizeHeight, maxHeight, maxSizHeight) { 

    if (size === null || size === undefined) { 
    size = 0.6; 
    } 

    if (minHeight === null || minHeight === undefined) { 
    minHeight = 600; 
    minSizeHeight = 150; 
    } 

    if (maxHeight === null || maxHeight === undefined) { 
    maxHeight = 800; 
    maxSizHeight = 600; 
    } 

    var windowHeight = $(window).height(); 
    if (!fixed) { 
    windowHeight = windowHeight * size; 
    } else { 
    windowHeight = size; 
    } 

    if ($(window).height() < minHeight) { 
    windowHeight = minSizeHeight; 
    } 

    if ($(window).height() > maxHeight) { 
    windowHeight = maxSizHeight; 
    } 


    var gridContent = $("#" + grid + " div.k-grid-content"); 
    var lockedContent = $("#" + grid + " div.k-grid-content-locked"); 

    gridContent.height(windowHeight); 

    if (lockedContent !== null && lockedContent !== undefined) { 
    lockedContent.height(windowHeight); 

    } 


}

所以根據您的要求，我的理解。

在這個例子中，我們提供以下簽名

：

resizeGrid（網格，大小，固定，了minHeight，minSizeHeight，maxHeight，maxSizeHeight）

網格==>我們正在使用的網格的id 大小==>這是用像素值或百分比表示的大小（例如，150或0.4（40％）） fixed ==>這告訴函數，如果傳遞的值是固定高度或百分比高度初始高度要求 minHeight ==>這應該是網格自身調整大小的最小屏幕大小 minSizeHe ight ==>這是如果滿足minHeight條件，網格應調整大小的大小。 maxHeight ==>這應該是網格自身調整大小的最大屏幕大小。 maxSizeHeight ==>這應該是網格的最大尺寸應該高於窗口的maxHeight。

注：最後4個設置將使用像素定義的值，但該代碼可以適用所以我提供我所宣佈的例子用百分比來工作，以及

：

resizeGrid("grid",600,true, 400,150, 800,600); 
resizeGrid("grid2",150,true, 300,300, 600,400);

因此，第一個網格#grid最初會將其自身設置爲600px的大小，然後在窗口低於400px並超過800px時自動調整大小。在這兩種情況下，它將分別調整到150px，600px。

那麼當我們開始調整我加入這個窗口：

$(window).resize(function() { 
      console.log("resizing::" ,$(window).height()); 
     resizeGrid("grid",600,true, 400,150, 800,600); 
      resizeGrid("grid2",150,true, 300,300, 600,400); 
     });

然後，這將查找窗口大小調整事件被解僱掉，然後相應地調整電網。

我已經添加了純粹的控制檯語句，所以您可以看到此事件被觸發，並且window高度是檢查代碼是否在activated在正確的點。您可能會注意到

一兩件事在這裏這些行：

var gridContent = $("#" + grid + " div.k-grid-content"); 
    var lockedContent = $("#" + grid + " div.k-grid-content-locked");

由於電網「捆綁」鎖定和非鎖定部分成不同的標籤，我檢查，看看是否有任何鎖定的列否則你會在網格的各個部分有不同的滾動/意外風格。

如果您需要任何更多解釋/更改讓我知道，我會相應地更新我的答案。希望這是你所追求的。

編輯：我已經更新的例子，所以你可以看到側網格側

來源

2016-04-22 12:16:10

設置劍道網格高度可滾動自動最小高度最大高度

回答

相關問題