设置剑道网格高度可滚动自动最小高度最大高度

我知道这是一个经常讨论的问题。无论如何，我想给它一个镜头：我正在使用多个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

设置剑道网格高度可滚动自动最小高度最大高度

回答

相关问题