jquery - 使用多个 KoGrid 对象调整窗口大小会将任何隐藏的 KoGrid 的宽度设置为零

Question

对于 CSS(或者 KoGrid)专家(我两者都不是)来说，这可能是一个简单的问题。该设置是一个使用 Knockout 和 JQuery 以及一对多 KoGrids 的网页。一次只有一个网格是“显示: block ”。所有其他的都是“显示:隐藏”。

当用户调整浏览器窗口大小时，隐藏网格的 kgTopPanel、kgViewport 和 kgFooterPanel 区域的宽度设置为“0”。之后，当用户单击一个链接来激活之前隐藏的网格时，它不会恢复宽度，他们必须再次调整浏览器窗口的大小才能看到东西。经过很长时间，我想出了下面的 hack 来绕过它，但它很丑陋。

有没有一种不用黑客就能解决这个问题的优雅方法？我可以防止这些宽度首先设置为零吗？我不是 CSS 专家，我早就穷尽了我的知识。我花了一整天的时间在网上搜索，尝试了很多东西，最终没有找到答案。

在下面的代码片段中，“domPanel”是一个包含所有网格的 div。 “domObject”是我要打开的一个网格。

<div id='Grid1' data-bind="koGrid: g1.GridOptions"></div>
<div id='Grid2' data-bind="koGrid: g2.GridOptions"></div>
...
domTabPanel.children().css('display', 'none');
domObject.css('display', 'block');
// Hack to restore the widths.  If you resize the page
// when another tab is visible, all the widths will have been set to 0.
domObject.find(".kgTopPanel").css("width", "inherit");
domObject.find(".kgTopPanel").children().css("width", "inherit");
domObject.find(".kgViewport").css("width", "inherit");
domObject.find(".kgViewport").children().css("width", "inherit");
domObject.find(".kgFooterPanel").css("width", "inherit");
domObject.find(".kgFooterPanel").children().css("width", "inherit");

PS:这个问题在 IE 和 Chrome 下都会出现，所以我认为所有浏览器都可能受到影响。

Answer 1

当元素收到 display: none 时，在 JavaScript 中检索它的大小将导致宽度和高度为零。可能有一些代码(在 koGrid 中)正在读取宽度和高度并以编程方式对其进行处理。但是，您的帖子中没有相关代码，因此很难说得更具体。

一个可能的解决方法是不使用 display: none，而是通过给它们一个绝对位置并使它们远离页面来“隐藏”不可见的网格。通过给他们一个样式有点像这样的类来做到这一点:

.my-invisible-class {
    position: absolute;
    left: -9999px;
}

这样一来，它们就看不见了，但实际上仍然完好无损。它们的宽度和高度应保持稳定。