0

I'm programmatically creating the DOJO TabContainer and the ContentPanes to add to that tabContainer. Each of the contentPanes contain my custom widget. Some of the code is shown below. When the tab is shown, the containerNode on the first tab has a height of 0px as result of which even though the first tab has the fully loaded widget but it won't display in the browser. This used to work correctly in 1.6. I have replaced dojo 1.6 to 1.9.3 and have run into this issue. Any ideas?

    var availableWidgets = { 
'Name': {title: 'Name', widget:'test.ui.NameWidget'},
'Stats':    {title: 'Stats', widget:'test.ui.StatsWidget'}

};

postCreate: function(){ 
var tabContainer = new dijit.layout.TabContainer({controllerWidget: "dijit.layout.TabController"}, this.pContainerDiv);                     
tabContainer.set('class', 'claro');
tabContainer.set('doLayout', false);
tabContainer.set('style', "width: 100%; height: 100%;"); 

dojo.forEach(this.menuItems, dojo.hitch(this, function(menuItem, index){
    var widgetInfo = availableWidgets[menuItem];
if(widgetInfo != null){
    var contentPaneId = portletNamespace + pContext.persistentId + menuItem + 'ContentPane';

    var contentPane = new dijit.layout.ContentPane({
    id: contentPaneId,
            title: widgetInfo.title,
    selected: currentSelectedItem == menuItem,
    closable: false,
    style: 'height:100%;padding: 15px;',
    onShow: dojo.hitch(this, function(){                               
       //can no longer do this in 1.9
       //dojo.require(widgetInfo.widget);                             
       if (widgetInfo.widget == 'test.ui.NameWidget') {
           dojo.require("test.ui.NameWidget");
       } else if (widgetInfo.widget == 'test.ui.StatsWidget') {
           dojo.require("test.ui.StatsWidget");
       } 

       var currentView = this.widgets[widgetInfo.title];
       if(!currentView){
           currentView = eval('new ' + widgetInfo.widget + '(this.params)');
           currentView.placeAt(contentPaneId, 'last'); 

           // startup called by (dijit/_WidgetBase in 1.9.3) by placeAt above
           // currentView.startup(); 

           this.widgets[widgetInfo.title] = currentView;                                    
           }                                
            })
    });                   
        tabContainer.addChild(contentPane);
    }
}));

}

tsc
  • 27
  • 7

2 Answers2

0

I would try calling .resize() on the contentpane after adding your widget to it. That should size the contentpane correctly. Another option would be calling .resize() on the tabcontainer in general after adding a child to the contentPane.

Richard
  • 1,138
  • 1
  • 6
  • 11
  • I tried calling referesh on the ContentPane but b/c the contentPane does not have a Href set on it, it loads the the base url of the application when I call refresh. That leads to other errors (with duplicate ids) and incorrect display. I also tried calling refresh on the tabContainer but that didn't do anything. – tsc May 13 '14 at 14:53
  • Forgot to mention, resize didn't help either (tried both tabcontainer and contentpane). Any other ideas? – tsc May 13 '14 at 18:36
  • Would you mind putting up a fiddle of your code then? It would make it a little easier to figure out what your problem is. – Richard May 13 '14 at 18:44
  • My project is quite large and I haven't used fiddle before. Trying to setup something on fiddle will take me some time. I'll try to put up an example on fiddle later. – tsc May 13 '14 at 19:29
  • I have a workaround. Its ugly but it works. At end of postcreate, I create a new dummy pane, add it to the tabcontainer and select it. Then I remove the dummypane and select the first contentpane. This seems to do the trick. By the time the dummy pane is removed and the first tab is selected, dojo seems to understand the size of all components and renders everything correctly. I didn't need to do this in 1.6 so its annoying that I can't find the right way to do this in 1.9.3. – tsc May 13 '14 at 19:41
0

I have a fix. Before adding the content panes to the tab container, I now call: 

tabContainer.startup();

When using dojo 1.6, I was doing this after all the content panes were added to the tab container. Calling this before fixes the height issue and renders all tabs correctly using dojo 1.9.3.

tsc
  • 27
  • 7