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

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
});

Answer 3

I faced similar problem, for me the following change in CSS worked.
.ui-accordion .ui-accordion-content{
overflow:visible !important;
}

Answer 4

Nowadays (with jQuery UI - v1.8), just autoHeight is enough, no more scrollbars are appearing.
jQuery("#accordion").accordion(
{
autoHeight:false
}
);

Answer 5

Having heightStyle: "content" helped resolve my issue.
Reference: Accordion

Answer 6

I know this is old, but I was having this problem and landed here. A solution that doesn't break your animation and gets rid of the animation can be found here:
http://webdevscrapbook.wordpress.com/2012/02/24/jquery-ui-unnecessary-scrollbar-in-accordion/
For those lazy few who don't want to click, the short answer is:
.ui-accordion .ui-accordion-content { overflow:hidden !important; }
in the accordion's CSS

Answer 7

try this
http://helpdesk.objects.com.au/javascript/how-to-avoid-scrollbars-when-using-jquery-accordion

Answer 8

I got this from the http://helpdesk.objects.com.au/javascript/how-to-avoid-scrollbars-when-using-jquery-accordion link mentioned above. It was one of the comments under the article. It gets rid of the scroll bar but also keeps the rest of the divs formatting. The above answers can cause content to flow over borders as was happening me.
.ui-accordion .ui-accordion-content{
height:auto!important;
}

Answer 9

This works for me:
.ui-accordion-content-active, .ui-accordion-header-active{
display: block;
}

Answer 10

I tried
.ui-accordion .ui-accordion-content{ overflow:visible !important; }
but I saw some visual artifacts with first tab. So I fixed the problem this way:
<script type="text/javascript">
(function() {
var fixScroll = function(event, ui) {
$(event.target).find('.ui-accordion-content-active').css('overflow', 'visible');
}
$('#tabs').accordion({
header: "h2",
create: fixScroll,
change: fixScroll
});
})();
</script>

Answer 11

Check if the padding for the ui-accordion-content is being overridden.
I experienced the same issue when I had put the following in my css:
.container .ui-widget-content {
padding-right: 3%;
}
I changed it as shown below and the scroll bars were gone!
.container .ui-widget-content:not(.ui-accordion-content) {
padding-right: 3%;
}
I don't have auto-height turned on either.