Sub-widgets won't render (will have 0 height) in Dojo - widget

Question

Have a look at this simple fiddle:
http://jsfiddle.net/mercmobily/y4uG2/10/
Basically I declare a Widget, and start adding away sub-widgets. At one point, I have the sub-widget "section" which is a templated widget with a tab container and sub-tabs.
The main widget has:
'<div data-dojo-type="Section" data-dojo-props="title: \'Sub Widget\'" data-dojo-attach-point="section"></div>' +
And that "section" widget has:
templateString: '' +
' <div>' +
' <div class="subWidget" data-dojo-type="dijit.layout.TabContainer" tabPosition: \'left-h\'" dojo-attach-point="tabCont" >' +
' <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title: \'Second Widget one\'">Second Widget One</div>' +
' <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title: \'Second Widget Two\'">Section Widget Two</div>' +
' </div>'+
' </div>'
Now, I am having a bit of a hard time getting the sub-widget, "section", to render properly.
On my actual program right now I played with:
doTemplate
height attribute in CSS
Catching resize() from the main widget and calling resize() in the sub-widget
(About point (3), I had to do something like:
resize: function(){
this.inherited(arguments);
console.log("Resize in main widget called!");
this.settingsTab.resize();
}
At this point, I am going insane and hence the question: what is the accepted, normal and common way to make sure that, in the fiddle, the sub-widget is rendered when you instantiate the main one?
PLUS, do I need to specify the height:100% for every tab container I ever use? (it looks like it)
Thank you!
UPDATE
I updated the fiddle. At this point I added a "height" to the tab container. After that, rsizing the browser window actually does the trick (!). I am not quite clear why I need that height there, but OK.
http://jsfiddle.net/mercmobily/y4uG2/16/
I also did a on() when a user clicks on the "broken" widget, and -- guess what -- resize is run and it renders fine.
This makes even less sense. Why is my own widget behaving any different than the ones defined within the template? I started all sorts of theories: height cannot be calculated because it isn't displayed, for example. But then the SAME should apply to the other tab with sub-tabs, labelled as "Complex" on the left hand side!
I am out of ideas. No, really.

Answer 1

Indeed there is a typo, as Frode mentioned, but you will still need to click one of the tabs if you want your tab content to appear in the SubWidget.
I suggest that you correct the typo and make your widget subclass ContentPane rather than _WidgetBase to solve this issue, as ContentPanes know how to resize themselves, like this :
declare('SubWidget', [ContentPane, _TemplatedMixin, _WidgetsInTemplateMixin], {
templateString: ''...
See http://jsfiddle.net/psoares/YwWst/
By the way, there is no need to specify widgetsInTemplate : true in 1.8. Adding _WidgetsInTemplateMixin is enough...

Answer 2

The templateString in your SubWidget has a typo. Could it simply be that?
...<div style="height:100%" data-dojo-type="dijit.layout.TabContainer" tabPosition: \'left-h\'" data-dojo-attach-point="tabContainer" >'...
Should probably be:
<div style="height:100%" data-dojo-type="dijit.layout.TabContainer" data-dojo-props="tabPosition: \'left-h\'" data-dojo-attach-point="tabContainer" >'
That seems to do the trick in your fiddle: http://jsfiddle.net/y4uG2/18/