jQuery UI accordion with autoHeight=true has unnec

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

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.

Answer 2

I faced similar problem, for me the following change in CSS worked.

.ui-accordion .ui-accordion-content{
overflow:visible !important;
}

Answer 3

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 4

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 5

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