Geek Answers Handbook

How To Make The Height Of A Digit Accordion Dynamics

I cannot figure out how to say that the accordioncontainer set the height of its accordion panel to auto so that the height of the panel is dynamic depending on its contents.

In the following code, I add two panels to the accordion connector. One has a height of 10 pixels and the other 90 pixels, but in both cases the height of the accordion panel is calculated to 10 pixels. It seems that he always rises to the height of the first.

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

+4
source share
4 answers

I override the _getTargetHeight dijit.layout.AccordionContainer function and always return 'auto' for height. Animation of sliding windows will not work correctly, but it is not so 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'; }
+3
source

This is currently not possible. I wrote a blog / sample code to explain why and how to create a TitlePane group that expands to their natural height (rather than the container height for the AccordionContainer):

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

This requires the creation of a single widget TitleGroup (custom, code on the blog) and the placement of TitlePane inside. Each of them behaves basically like an AccordionPane (with title = "attributes, href =" "download options, etc.) and delegates uppercase clicks to control the open / closed state of siblings.

+3
source

try setting the dimensions in the accordion container itself to a size that is large enough to hold your content plus the necessary headers, for example.

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

The startup () call in the container should launch the child panels for you.

0
source

Now you can just use dijit.TitlePane without a container at all. You can pass open: false when you create windows so that they are closed. I think that their inclusion in dojox.widget.TitleGroup will emulate a behavior consisting of 1 open at a time.

0
source

More articles:


All Articles