Kendo 网格中锁定和解锁列的高度不匹配

Question

我有 Kendo UI 网格一个锁定的列，它具有动态宽度和高度。 Grid 的容器正在 CSS 调整大小，我正在使用 kendo.resize($("#grid")) 使 Grid 适合它并且一切正常。

我还有一个函数在 window resize 事件上触发，它正在调整列宽。如果可能的话，列应该占据整个网格而不显示底部滚动条，但它们也有最小高度。所以我计算了列宽并将其设置为它们，但是当我在未锁定的列容器中有水平滚动条时，锁定的容器与其不匹配。

如果有水平滚动条，通常锁定的列会在底部显示白色区域，但当我明确设置列宽时，它不会。

我在这个 fiddle 中重现了我的问题（它比我描述的要简单一些，但想法是一样的）：http://dojo.telerik.com/ADaqe

当我打开它时，网格应该看起来不错，但是当您减小右侧 iframe 的宽度时，水平滚动条将显示 - 白色区域未显示，只需尝试将网格滚动到底部，看看会发生什么：任何帮助将不胜感激。

Answer 1

有私有网格函数 ._adjustLockedHorizontalScrollBar() 可以满足我的需要：

$(window).on('resize', function () {
    that._adjustLockedHorizontalScrollBar();
    ...
});

Answer 2

如果您只想使用 CSS 来解决这个问题，将 padding-bottom: 100% 添加到锁定列中的 table 对我有用。

.k-grid-content-locked {
   height: 100% !important; // overrides inline style

   table {
     padding-bottom: 100%;
   }
}

在 Chrome 75.0.3770.100、IE 11.76517134.0、Android 8 和 iOS 12.2

中测试

希望对您有所帮助

Height of locked and unlocked columns not match in Kendo Grid