javascript - 组件开始重叠然后在调整窗口大小时移动

Question

我正在编写一个 Rally 应用程序，它在单独的 Rally 容器中同时包含图表和网格。容器采用“vbox”(垂直框)布局。它们的设置如下:

{
    xtype: 'container',
    itemId: 'rightView',
    flex: 1,
    layout: 'vbox',
    items: [
        {
            xtype: 'container',
            itemId: 'topRightView',
            flex: 1
        },
        {
            xtype: 'container',
            itemId: 'bottomRightView',
            flex: 1
        }
    ]
}

其中图表在 topRightView 中，网格在 bottomRightView 中

首次呈现时，网格完全覆盖图表。但是，当我完全调整窗口大小时，它们会转到它们应该位于的位置(图表位于网格上方)。

网格和图表的 CSS 是:

.builds-grid {
    width:600px;
}

.builds-chart {
    margin-top: 30px;
    border: dotted;
    width: 700px;
}

在检查图表和网格 html 后，我发现两者的位置是相对的，所以不应该搞砸了。

我还尝试在两者上放置不同的 z-index 以确保它们不重叠，但这没有奏效。

网格在图表之前呈现，因此这可能是问题的一部分。我真的不知道该怎么办；任何帮助将不胜感激!谢谢!

Answer 1

在您的顶部代码段中，添加以下行:

height: 400px,

放入将要保存图表的容器中。它最终应该看起来像这样:

{
    xtype: 'container',
    itemId: 'rightView',
    flex: 1,
    layout: 'vbox',
    items: [
        {
            xtype: 'container',
            itemId: 'topRightView',
            height: 400px,
            flex: 1
        },
        {
            xtype: 'container',
            itemId: 'bottomRightView',
            flex: 1
        }
    ]
}