0

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

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

有没有一种优雅的方法来解决这个问题而无需破解？我可以首先防止这些宽度设置为零吗？我不是 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 下，所以我假设所有浏览器都可能受到影响。

4

1 回答 1

1

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

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

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

这样，它们就隐藏在视线之外，但实际上仍然完好无损。它们的宽度和高度应保持稳定。

于 2013-11-13T12:02:03.783 回答