Question

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

<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的内容具有可变高度，因此我不想手动设置高度。

Answer 1

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

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

Answer 2

尝试调整根BorderContainer的大小。

它看起来像是一些黑客，但它对我有用：

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

并在内部窗口小部件代码中添加公共调整大小方法：

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

Dojo：区域'top'中的TabContainer在BorderContainer中不可见

2 个答案: