Dojo:BorderContainer在使用多个DropDownButton时未正确显示_Dojo

Dojo:BorderContainer在使用多个DropDownButton时未正确显示

dojo

Dojo:BorderContainer在使用多个DropDownButton时未正确显示,dojo,Dojo,我正在尝试创建一个布局，其中带有两个选项卡的边框容器将显示一系列下拉按钮。例如，考虑下面的代码片段： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style type="text/css"> body, html { font-fami

我正在尝试创建一个布局，其中带有两个选项卡的边框容器将显示一系列下拉按钮。例如，考虑下面的代码片段：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <style type="text/css">
            body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djConfig="parseOnLoad: true">
        </script>
        <script type='text/javascript'>
            dojo.require('dijit.form.DropDownButton');
            dojo.require('dijit.layout.ContentPane');
            dojo.require('dijit.layout.BorderContainer'); 
            dojo.require("dijit.layout.TabContainer");
        </script>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
        />
        <style type="text/css">
            html, body { width: 100%; height: 100%; margin: 0; overflow:hidden; }
        </style>
    </head>

    <body class="claro">
        <div dojoType="dijit.layout.BorderContainer" design="headline" gutters="true" liveSplitters="true" style="width: 100%; height: 100%;">
            <div dojoType="dijit.layout.ContentPane" splitter="true" region="center" style="width: 100%;">
                <div dojoType="dijit.layout.TabContainer" tabStrip="true" style="width: 100%; height: 100%">
                    <div dojoType="dijit.layout.ContentPane" title="My first tab" selected="true">
                         <div dojoType="dijit.layout.ContentPane">   
                             <span>Drop Down Button 1</span>
                             <span>Drop Down Button 2</span>
                        </div>
                        <div dojoType="dijit.layout.BorderContainer" design="sidebar" gutters="true" liveSplitters="true" style="width: 100%; height: 95%">                         
                            <div dojoType="dijit.layout.ContentPane" splitter="true" region="leading" style="width: 100px;">
                                Left
                            </div>
                            <div dojoType="dijit.layout.ContentPane" splitter="true" region="center">
                                Center
                            </div>
                        </div>
                    </div>
                    <div dojoType="dijit.layout.ContentPane" title="My second tab">
                        Lorem ipsum and all around - second...
                    </div>
                </div>
            </div>
            <div dojoType="dijit.layout.ContentPane" splitter="true" region="bottom" style="height: 100px;">
                Bottom
            </div>
        </div>
    </body>
</html>


正文，html{字体系列：helvetica，arial，无衬线；字体大小：90%；}
require（'dijit.form.DropDownButton'）；
require（'dijit.layout.ContentPane'）；
require（'dijit.layout.BorderContainer'）；
require（“dijit.layout.TabContainer”）；
html，正文{宽度：100%；高度：100%；边距：0；溢出：隐藏；}
下拉按钮1
下拉按钮2
左边
居中
Lorem ipsum和全方位-秒。。。
底部

“Drop Down Button 1”和“Drop Down Button 2”跨度元素将很好地显示在第一个选项卡元素中，并显示在同一选项卡中边框容器的上方。现在，如果我们使用下面的代码片段将span元素与Dijit DropDownButton组件封装在一起：

<div dojoType="dijit.form.DropDownButton" data-dojo-props="iconClass:'dijitIconEdit'">      
    <span>Drop Down Button 1</span>
</div>
<div dojoType="dijit.form.DropDownButton" data-dojo-props="iconClass:'dijitIconEdit'">      
    <span>Drop Down Button 2</span>
</div>


下拉按钮1
下拉按钮2

选项卡和边框容器混乱，无法正确显示

我使用的是Dojo 1.6.1。

看起来您的“我的第一个选项卡”应该是一个BorderContainer，而不是ContentPane。因此，第一个选项卡有一个顶部（带按钮），加上已经有的左侧和中间部分

换句话说，而不是：

<div dojoType="dijit.layout.ContentPane" title="My first tab" selected="true">
   <div dojoType="dijit.layout.ContentPane">   
       <span>Drop Down Button 1</span>
       <span>Drop Down Button 2</span>
   </div>
   <div dojoType="dijit.layout.BorderContainer" design="sidebar" gutters="true" liveSplitters="true" style="width: 100%; height: 95%">                         
       <div dojoType="dijit.layout.ContentPane" splitter="true" region="leading" style="width: 100px;">
             Left
       </div>
       <div dojoType="dijit.layout.ContentPane" splitter="true" region="center">
             Center
       </div>
  </div>
</div>


下拉按钮1
下拉按钮2
左边
居中

做：


下拉按钮1
下拉按钮2
左边
居中

感谢比尔的回复！即使只使用ContentPane，元素仍然会显示得很好。问题是在下拉按钮1和2使用dijit.form.DropDownButton时。在我提供的示例html代码中，无论下拉按钮是放置在ContentPane还是BorderContainer中，最终的结果都是一个混乱的dojo界面。我的意思是使用上面发布的代码，然后将普通元素更改为DropDownButton的。至于放置，DropDownButton显然需要位于ContentPane内部，但是没有理由将第一个选项卡设置为ContentPane而不是BorderContainer。你可能仍然有和以前一样的问题，但首先要做的是。

<div dojoType="dijit.layout.BorderContainer" title="My first tab" selected="true" design="headline">
  <div dojoType="dijit.layout.ContentPane" region="top">   
                         <span>Drop Down Button 1</span>
                         <span>Drop Down Button 2</span>
  </div>
  <div dojoType="dijit.layout.ContentPane" splitter="true" region="leading" style="width: 100px;">
       Left
  </div>
  <div dojoType="dijit.layout.ContentPane" splitter="true" region="center">
       Center
  </div>
</div>