jQuery UI accordion with autoHeight=true has unnecessary scrollbar on non-default panes

Question

I am having trouble with jQuery accordion. When I create a content pane where the non-default pane has more content than default pane, and autoHeight is true, this provides nice animations when switching panes, but the non-default pane gets a scrollbar which I don't want.

You can see this in action by going to http://jqueryui.com/themeroller/, switching to a theme like "Blitzer" or "Humanity", and then opening Section 3 of the example accordion. Happens to me with Safari 3.2.1 and Firefox 3.0.8.

If you switch to autoHeight=false, then this does not happen and all content panes have the correct height, but the content pane is only rendered at the end of the animation and looks strange, so I had to turn off animations to avoid this strangeness.

Either I am misreading something, or this is a bug in jQuery UI accordion. Please help me figure out which of the two it is (or maybe both).

Answer 1

I tried several different things. autoHeight: false by itself did not work. This is what finally worked for me:

$( "#accordion" ).accordion({             heightStyle: "content",             autoHeight: false,         clearStyle: true,            }); 

I'm using this in a SharePoint content editor webpart with a fixed width, which added to the height issue when adding content to the accordion widget.

Answer 2

using this combo options works for me, 1.current version of jquery/ui

$( '#x' ).accordion({     autoHeight: false,     clearStyle: true });