Dojo：在 BorderContainer 内不可见区域“顶部”中的 TabContainer答案

【问题标题】：Dojo: TabContainer in region 'top' invisible inside BorderContainerDojo：在 BorderContainer 内不可见区域“顶部”中的 TabContainer
【发布时间】：2012-12-03 16:56:13
【问题描述】：

我想在BorderContainer 的顶部区域内放置一个TabContainer，如下所示：

<div id="appLayout" data-dojo-type="dijit/layout/BorderContainer">
    <div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region: 'top'">
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Tab 1'">tab 1</div>
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Tab 2'">tab 2</div>
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">center</div>
</div>

当我尝试这个时，TabContainer 是不可见的。当我将TabContainer 放在BorderContainer 的中心区域时，一切正常：

<div id="appLayout" data-dojo-type="dijit/layout/BorderContainer">
    <div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region: 'center'">
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Tab 1'">tab 1</div>
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Tab 2'">tab 2</div>
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom'">bottom</div>
</div>

为什么TabContainer 在顶部区域不可见？我可以让它可见吗？

编辑：TabContainer 的内容具有可变高度，因此我不想手动设置高度。

【问题讨论】：

标签： dojo dijit.layout

【解决方案1】：

设置 TabContainer div 的高度 css 属性，例如喜欢：

<div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region: 'top'" style="height: 100px;">
    ...
</div>

【讨论】：

但是内容的高度是可变的，我想让 TabContainer 适应高度。这不可能吗？
我们可以不将标签容器的高度设置为 100% ......难道不是顶部区域的高度吗？

【解决方案2】：

尝试调整根 BorderContainer 的大小。

这看起来像是一些 hack，但它对我有用：

<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-attach-point="rootContainerWidget">
   <!-- content panes, tab containers etc -->
</div>

并在小部件代码中添加公共 resize 方法：

resize: function () {
    // resize hack
    this.rootContainerWidget.resize();
}

【讨论】：

抱歉，我无法检查，我没有代码了。不过还是谢谢。