Using BorderContainer inside TabContainer in dojo

Question

I need to use BorderContainer inside a TabContainer in dojo. My requirement is to have 3 different pane inside each of the tab which I will create. So for that I am trying to use BorderContainer inside TabContainer but it seems to be not working. Here is what I am trying.

A,B and C are the tabs which i am trying to create.Inside which I am using ContentPane for each of them and then BorderContainer to specify left,center and right region for that particular tab.

But it is not giving me any output. Please advise what i am doing wrong here.

 <div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="splitter:true, region:'top'">
            <div data-dojo-type="dijit/layout/ContentPane" title="A" selected="true" data-dojo-props="splitter:true">
              <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="guuers:false">
                 <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'left'">Left pane of Tab A</div>
                 <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'center'">Center pane of Tab A</div>
                 <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'right'">Right pane of Tab A</div>
              </div>
            </div>
            <div data-dojo-type="dijit/layout/ContentPane" title="B" data-dojo-props="splitter:true">
              <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="guuers:false">
                 <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'left'">Left pane of Tab B</div>
                 <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'center'">Center pane of Tab B</div>
                 <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'right'">Right pane of Tab B</div>
              </div>
            </div>
           <div data-dojo-type="dijit/layout/ContentPane" title="C" selected="true" data-dojo-props="splitter:true">
              <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="guuers:false">
                 <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'left'">Left pane of Tab C</div>
                 <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'center'">Center pane of Tab C</div>
                 <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'right'">Right pane of Tab C</div>
              </div>
            </div>
   </div>

Answer 1

Your declarative markup is correct, but since I can't see the rest of your code I would guess that you are not calling require on TabContainer, BorderContainer and ContentPane. Dojo needs you to bring those in before you can use them declaratively like you are doing. So you would need this in your javascript:

require([
  "dojo/parser",
  "dijit/layout/BorderContainer",
  "dijit/layout/TabContainer",
  "dijit/layout/ContentPane"
]);

Here is a pen that shows your code works, so I would check to see if you are pulling in those modules with require. http://codepen.io/kyledodge/pen/MwpMZm

The other thing to check is if your dojoConfig is set to parseOnLoad:

dojoConfig = {
  parseOnLoad: true
};

If not, you'll either need to set that, or require dojo/parser and call parser.parse(). Parser is key to using the data-dojo-type attribute like you are doing. Here is some info that may be helpful:

http://dojotoolkit.org/reference-guide/1.10/dojo/parser.html

Answer 2

I don't exactly have an answer but I think I can pin down exactly why nothing shows up: The border container doesn't seem to "fill" the containing object. I'm trying to put a border container inside another border container, and its child nodes are present but seem to end up with zero height. Apparently you have to explicitly set the border container's dimensions.