Question

我们可以一次水平和垂直创建dojo标签。我尝试了下面的代码，但它只显示第二个div水平显示标签。关于我想在顶部显示标签，以便用户可以选择垂直或水平显示的任何所需标签。

以下是示例代码：

  <div dojoType="dijit.layout.TabContainer" style="width: 100%; height: 100%;" tabStrip="true">
            <div dojoType="dijit.layout.ContentPane" title="My first tab" selected="true">
                   11
            </div>
            <div dojoType="dijit.layout.ContentPane" title="My second tab">
                 2222
            </div>
            <div dojoType="dijit.layout.ContentPane" title="My last tab">
               333333
            </div>
    </div>

    <div data-dojo-type="dijit/layout/TabContainer" style="width: 400px; height: 100px;" tabPosition="left-h" tabStrip="true">
          <div data-dojo-type="dijit/layout/ContentPane" title="My first left tab" selected="true">
           left1111
          </div>
          <div data-dojo-type="dijit/layout/ContentPane" title="My second left tab">
            left2222
          </div>
          <div data-dojo-type="dijit/layout/ContentPane" title="My last left tab">
            left3333
          </div>
    </div>

Answer 1

您想在彼此下方显示这些标签吗？问题是Dojo中的布局小部件需要知道它们可以占用的空间。他们将查看他们的父元素，以决定他们可以采取的尺寸。

您的第一个TabContainer有height 100%，这似乎工作正常，但实际上并没有。 height: 100%使其为0，结果是该容器下方的任何内容都将开始重叠。

因此，在您的情况下，您的第二个TabContainer将与第一个<div dojoType="dijit.layout.TabContainer" tabStrip="true" style="width: 100%;height: 100px"> </div>重叠。

解决方案是给它一个固定的高度，例如：

{{1}}

演示：http://jsfiddle.net/5yn2hLv9/

标签垂直和水平显示

1 个答案: