Dojo tabcontainer not displaying

Question

Having some trouble getting dojo to display a borderContainer containing a tabContainer and a series of tabs, all contained within a dialog. This has all been done programmatically and the startup() event has been called.

The tabs are rendered and displayed, but rather unusually. Once the dialog itself is refreshed (discovered while opening and closing the console) everything rights itself. I've tried to force a resize() by calling it as part of start up - this hasn't worked. I've been trying to get this working properly for ages now. Its the only niggling thing about this! Having the manually refresh a dialog because a widget isn't displaying properly isn't exactly good UI design. The borderContainer does have height and width properties.

Could anyone suggest a few methods to try and why?

http://i.stack.imgur.com/YXtkq.png

Screen shot above (sorry I don't have 10 rep yet)! I've tried to use 'doLayout: false' and that hasn't worked. I've got the 'style' set to height: 360px and width: 575px which are both well within the boundaries of the containing widget.

This often has something to do with the tabcontainer starting up when its parent DOM node isn't visible (or detached from the DOM). Can you reproduce the problem in a fiddle? Here's a starting point: fiddle.jshell.net/64MDQ — Frode
@Frode By calling boardercontainer.startup() from the parent widget of the dialog I was able to render it properly. If you put in an answer, i'll accept it. — Galatoni
I'm not sure what the issue or solution was (sometimes my mere presence solves problems ;) ). Describe your fix in an answer if you can, and you'll have your 10 rep too. — Frode

Galatoni Galatoni · Accepted Answer · 2014-01-27T08:58:49

Well I discovered that simply doing startup() on the parent widget was not enough. Because it was instantiated in a hidden dialog widget, it needed to be instantiated from there.

the onclick event for the button was:

    //custom widget - contrary to its name, this is the content!
var invoiceDialogWidget = new InvoiceDialogWidget(dialogValues);

var dia = new DijitDialog({
id: "invoiceDialogWidget",
content: invoiceDialogWidget,
title: "Invoice Detail"
onHide: function(){
    this.destroyRecursive();
}
});
dia.show();

//magic line
invoiceDialogWidget.invoiceDialogContentNode.startup();

What I found was that by calling startup() as I had in the snippet above - the custom widget was instantiated correctly and matched the style of the dialog (which was made visible). Before I was calling it from within the custom widget, which hadn't been fully instantiated yet!

The result was calling startup() on a widget which defaulted to its parents style - which was invisible at the time.

Dojo tabcontainer not displaying

1 Answers