CODEWITHSUNDEEP
javascriptdojo
Ram C
Ram C

Reputation: 173

Dojo tabcontainer in titlepane does not work in version > 1.6

Placing a tab container on titlepane looks weird in any browser but if I use the dojo v1.6 it appears perfectly. Am I doing something wrong here while porting code to 1.8.4 Or something broken in later versions?

Please change the dojo version in this code and see the difference.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
  <html>  
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title> 
    </title> 

    <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 { height: 100%; width: 100%; margin: 0; padding: 0; }
      #map{
        padding:0;
      }
    </style> 

    <script type="text/javascript"> 
      var djConfig = {
        parseOnLoad: true
      };
    </script> 

    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.js"></script>

    <script type="text/javascript"> 
      dojo.require("dijit.dijit"); // optimize: load dijit layer
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.TitlePane");
      dojo.require("dijit.layout.TabContainer");
      //require(["dojo/dnd/move", "dojo/_base/declare", "dojo/dom-construct", "dijit/layout/TabContainer", "dijit/TitlePane", "dijit/layout/BorderContainer", "dojox/layout/ExpandoPane", "dojo/domReady!"]);
    </script> 

  </head> 

  <body class="claro"> 
    <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%;height:100%;margin:0;">
        <div dojotype="dijit.layout.ContentPane" region="center" style="width:500px;height:500px; border:1px solid #000;padding:0;">
       <div style="position:absolute;width:500px;height:500px; left:30px; top:10px; z-Index:999;">

       <div id="titlepane" dojoType="dijit.TitlePane" title="Show Tabs" closable="false"  open="false">
              <div id="tabContainer" dojoType="dijit.layout.TabContainer" style="width:100%; height:100%">
                <div id="one" dojoType="dijit.layout.ContentPane" title="Tab 1" selected="true">
                  Tab 1 content
                </div>
                <div id="two" dojoType="dijit.layout.ContentPane" title="Tab 2">
                  Tab 2 content
                </div>
                <div id="three" dojoType="dijit.layout.ContentPane" title="Tab 3">
                  Tab 3 content
                </div>
              </div>
        </div>
        </div>
        </div>
    </div>
  </body>
  </html>

Upvotes: 1

Views: 1230

Answers (1)

bishop
bishop

Reputation: 39414

Two problems. First, the code has TitlePane inside of a BorderContainer, but TitlePane is not designed to reside inside of layout widgets:

It extends ContentPane but since it isn’t used inside other layout widgets

Second, as written, the TabContainer inside the title pane needs an absolute height, not relative. You can get away with a relative height for TabContainers inside of BorderContainers (or other layout widgets), because BorderContainer calculates the absolute height for you. Since TitlePane does not provide that calculation, you must specify an absolute height...

or, you can tell TabContainer not to do its own layout with "doLayout=false":

<!DOCTYPE html>
<html>
    <head>
        <link href='//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css' rel='stylesheet' type='text/css' />
        <script src='//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js'></script>
    </head>
    <body class='claro'>
        <div data-dojo-id='titlePane' data-dojo-type='dijit/TitlePane' data-dojo-props='region:"trailing"'>
            <div data-dojo-id='tabContainer' data-dojo-type='dijit/layout/TabContainer' data-dojo-props='doLayout:false'>
                <div data-dojo-type='dijit/layout/ContentPane' data-dojo-props='title:"Tab 1"'>Hi!</div>
                <div data-dojo-type='dijit/layout/ContentPane' data-dojo-props='title:"Tab 2"'>There!</div>
            <div>
        </div>
        <script type='text/javascript'>
        require(['dojo/ready', 'dojo/parser'], function (ready, Parser) {
            ready(function () {
                Parser.parse().then(function () {
                });
            });
        });
        </script>
    </body>
</html>

You can replace the data-dojo-props on the TabContainer with style='height:100px;' and get a similar effect. The only difference is that doLayout false uses the auto height from the contained content, while height:100px gives you a static height.

Upvotes: 2

Related Questions