I have a border container that is not displaying its content panes correctly until I open the Developer Tools console. Can anyone see why that might be happening? I've inserted two screenshots showing before and after display states of the container.
Markup:
<div>
<div data-dojo-attach-point="infoContainerDiv" id="infoContainerDiv">
</div>
</div>
Code in widget.js:
this.infoContainer = new BorderContainer({
style: "height: 100%; width: 100%;"
});
this.topContent = new ContentPane({
region: 'top',
title: 'the title',
content: 'I be on the top',
style: 'height: 100px; border: 1px solid black;'
});
this.bottomContent = new ContentPane({
region: 'bottom',
title: 'the title',
content: 'I be on the bottom',
style: 'height: 100px; border: 1px solid black;'
});
this.accordionContainer = new AccordionContainer({
region: 'center',
style: 'border: 1px solid black;'
});
this.accordionContainer.addChild(
new ContentPane({
title: "This is a content pane",
content: "Hi!"
})
);
this.accordionContainer.addChild(
new ContentPane({
title: "More content",
content: "Hello"
})
);
this.infoContainer.addChild(this.topContent);
this.infoContainer.addChild(this.bottomContent);
this.infoContainer.addChild(this.accordionContainer);
this.infoContainer.placeAt(this.infoContainerDiv);
this.infoContainer.startup();
Before:
After:
Accepted Solutions
I've found the cause. 
I need to hide the infoContainerDiv when the widget opens, so I have this line of code:
query(this.infoContainerDiv, self).style('display', 'none');
I then want to show the infoContainerDiv after a typeahead suggestion has been selected, so I have this line of code:
query(this.infoContainerDiv, this.domNode).style('display', '');
Removing both of these fixes the display problem.
Now I just need to find a better way of hiding and displaying the infoContainerDiv.
I've found the cause.
I need to hide the infoContainerDiv when the widget opens, so I have this line of code:
query(this.infoContainerDiv, self).style('display', 'none');
I then want to show the infoContainerDiv after a typeahead suggestion has been selected, so I have this line of code:
query(this.infoContainerDiv, this.domNode).style('display', '');
Removing both of these fixes the display problem.
Now I just need to find a better way of hiding and displaying the infoContainerDiv.
