How to make height of a dijit Accordionpane dynamic

Question

I can't figure out how to tell the accordioncontainer to set height of its accordion pane to auto so that the height of the pane is dynamic depending on its content.

In the following code I am adding two panes to an accordioncontainer. One has height of 10px and another has 90px but in both cases the height of the accordion pane is calculated to 10px. Looks like its always taking the height of the first one.

var accordionContainer = new dijit.layout.AccordionContainer({'id':'accContainer'}).placeAt("test");
var accordPane = new dijit.layout.ContentPane({"title": "test", "content":"<div style='height:10px'>sdfsdfsdf</div&gt;"});
var accordPane2 = new dijit.layout.ContentPane({"title": "test1", "content":"<div style='height:90px'>sdfsdfsdf</div>"});

accordionContainer.addChild(accordPane);
accordionContainer.addChild(accordPane2, 1);
accordPane.startup();
accordPane2.startup();
accordionContainer.startup();
accordionContainer.selectChild(accordPane2);

I am using dojo 1.3.2

Answer 1

It is not currently possible. I wrote a blog / sample code to explain why and how to generate a group of TitlePane's that expand to their natural height (rather than the height of the container for the AccordionContainer):

http://www.sitepen.com/blog/2008/10/21/quick-fixes-and-dojo-support/

It requires making a single TitleGroup widget (custom, code in blog), and placing TitlePane's inside. Each behave mostly like an AccordionPane (with title="" attributes, href="" loading capabilities, etc) and delegates title clicks to manage the open/closed state of siblings.

Answer 2

I Overrode the _getTargetHeight function of dijit.layout.AccordionContainer and always return 'auto' for height. Animation of sliding panes won't work correctly but its not that noticeable.

_getTargetHeight: function(/* Node */ node){
// summary:
//For the given node, returns the height that should be
//set to achieve our vertical space (subtract any padding
//we may have).
//This is used by the animations.

//var cs = dojo.getComputedStyle(node);
//return Math.max(this._verticalSpace - dojo._getPadBorderExtents(node, cs).h, 0);
return 'auto';
}

Answer 3

try setting the dimensions on the Accordion Container itself to a size that is big enough to hold your content plus the necessary title panes, e.g.

#accContainer{
  height: 120px;
  width: 200px;
}

The startup() call on the container should start up the child panes for you.

Answer 4

Now you can also just use dijit.TitlePanes with no container at all. You can pass open: false when you instantiate the panes to start them off closed. I think enclosing them in a dojox.widget.TitleGroup will emulate the behavior of having 1 open at a time.