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

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:

1. doTemplate
2. height attribute in CSS
3. 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/