Programmatically Created AccordionContainer in a BorderContainer having sizing issues.

Question

Hi all,

I am trying to programmatically create an AccordionContainer within a BorderContainer. I am able to get the accordion container to show up, however, it appears that it incorrectly computes it's initial size. When the screen draws, the second accordion panel is off the bottom of the screen. If you resize the screen, or press the 'Resize' button on the page, everything fixes itself. It's the strangest thing.

Here is the offending code:

// Create outer div
var node = dojo.byId('columnLayoutDiv');

var bc = new dijit.layout.BorderContainer({id:'brdr' ,design:'sidebar', style:'border: 0px; height: 400px;' });

node.appendChild(bc.domNode);

var widget1 = new dijit.layout.ContentPane({id: "center", region: "center", style:"padding: 0px;"});
widget1.attr('content', 'Left Pane')
bc.addChild(widget1);

var widget2 = new dijit.layout.ContentPane({id: "right", region: "right", style:"padding: 0px;"});
widget2.attr('content', 'Right Pane');
bc.addChild(widget2);

bc.startup();
bc.layout();


// Create the accordion and add it to the container
var resourcesAccordion = new dijit.layout.AccordionContainer({id:'accordionCtr'});


bc.getChildren()[0].attr('content', resourcesAccordion);
resourcesAccordion.startup();

// Create Accordion Panes and add them
var linksPane = new dijit.layout.ContentPane({
title: "Accordion 1",
style: "padding:0px; margin:0px;",
content: "Hello there!<br/>Hello there!<br/>Hello there!<br/>Hello there!<br/>"
});

var experiencePane = new dijit.layout.ContentPane({
title: "Accordion 2",
style: "padding:0px; margin:0px;",
content: "World<br/>World<br/>World<br/>World<br/>World<br/>World<br/>World<br/>"
});

resourcesAccordion.addChild(linksPane);
resourcesAccordion.addChild(experiencePane);
resourcesAccordion.layout();
bc.layout();

You can see a sample page that I created here: http://www.quimbik.com/sample/accordion.html

Any help would be greatly appreciated!

Answer 1

First off, the way BorderContainer is specified to work, you're supposed to declare height and width on the border container, then width (only) on all of your left/right regions and height (only) on your top and bottom regions. Center should not have any dimensions specified, which is correct in the example above. Your right region does not have a width in its style declaration, so the behavior in that case is unspecified. Try putting in a total width on 'brdr' and a width on your "right" region.

Also, you should be able to just plop your AccordionContainer directly in as your 'right' part of the border container, without the extra contentpane. Just put the region:'right' attribute on AccordionContainer and add it to the bordercontainer instead of the contentpane, or replace the contentpane if for some reason your app is written such that it needs to swap in the content later on.

HTH