2

I have a tab container with 3 content panes which loads only when browser is re sized but not during actual page load..The template file TContainer.html is as follows

<div style="width:100%;height:100%" >
<div dojoType="dijit.layout.TabContainer" data-dojo-attach-point="tab" open="true" tabPosition="top" style="width:100%; margin:5px;font-weight:bold; overflow-y:visible;" tabStrip="true"  doLayout="false">

        <!-- content panes: title is tab name, make this tab selected -->
        <div dojoType="dijit.layout.ContentPane" style="width:100%;height:100%;"  data-dojo-props="title:'Tab1',selected:'true'">   

        </div>

        <!-- content panes: title is tab name, no special features here -->
        <div dojoType="dijit.layout.ContentPane" style="width:100%;height:100%;" data-dojo-props="title:'Tab2'">
        </div>

        <!-- content panes: title is tab name, make this tab closable -->
        <div dojoType="dijit.layout.ContentPane" style="width:100%;height:100%;"  data-dojo-props="title:'Tab3'">
            </div>

    </div>

The associated TContainer.js file for the widget is as follows

define([
"dojo/_base/declare",
"dojo/_base/fx",
"dojo/_base/lang",
"dojo/dom-style",
"dojo/mouse",
"dojo/on",
"dojo/query",
"dijit/layout/TabContainer", 
"dijit/layout/ContentPane",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
 "dojo/text!./templates/TabContainer.html"

], function(declare, baseFx, lang, domStyle, mouse, on,query,TabContainer,ContentPane,_WidgetBase, _TemplatedMixin,_WidgetsInTemplateMixin,template){ return declare( [_WidgetBase, _TemplatedMixin,_WidgetsInTemplateMixin], {

    templateString: template,

    c1:"content1",

    c2:"content2",

    c3:"content3",

    // A class to be applied to the root node in our template
    baseClass: "tabWidget",

    constructor: function (args) {
        // Allow pages variable to be set at runtime
        declare.safeMixin(this, args);

    },

    resize: function () { 
        this.tab.resize(arguments);
        this.inherited(arguments); 
    },

    postCreate: function(){

// Run any parent postCreate processes - can be done at any point
this.inherited(arguments);

},

});

});

I create the widget programatically using the following code

var Tab = new TContainer({"c1" : "content1",     
                            "c2":"content2",
                             "c3":"content3 answers"
                           });
//dnode is a div node
Tab.placeAt(dnode);
Tab.startup();
Tab.resize();
meteor
  • 2,518
  • 4
  • 38
  • 52

2 Answers2

0

The height and width, rather the size of the parent container(must be the content pane here) does not render to the size of the tab container, so unless you manually resize the browser or programatically force the resize function it won't work.

You can alternatively use the following after startup: resize: function () { this.parentCont.resize(arguments); //here parentCont is the widget attach point this.inherited(arguments); }

Tejaswini
  • 56
  • 7
  • Added attach point's to all 3 content panes and tried calling resize for all 3 of them but still the same issue! – meteor Feb 26 '15 at 15:04
  • Use a BorderContainer as a parent for the tab container. Give an attach point for that. And you need to resize that parent container. – Tejaswini Feb 27 '15 at 09:25
  • Instead of a empty div tag(first one) provide a div tag as follows:
    And put this code after startup..... resize: function () { this.bc.resize(arguments);//bc is the atttachpoint name of the BorderContainer this.inherited(arguments); }
     – Tejaswini Feb 27 '15 at 09:35
0

Seems that controllerWidget: 'dijit.layout.TabController' property is needed to be defined in tabcontainer tag. It works fine now without any issues.Thanks to https://bugs.dojotoolkit.org/ticket/10113#comment:11

meteor
  • 2,518
  • 4
  • 38
  • 52