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

问题

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).

回答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.

回答2:

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

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

回答3:

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

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

回答4:

Nowadays (with jQuery UI - v1.8), just autoHeight is enough, no more scrollbars are appearing.

jQuery("#accordion").accordion(
  {
    autoHeight:false
  }
);

回答5:

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

回答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

回答7:

try this

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

回答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;
}

回答9:

This works for me:

.ui-accordion-content-active, .ui-accordion-header-active{
    display: block;
}

回答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>

回答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.

来源：https://stackoverflow.com/questions/727158/jquery-ui-accordion-with-autoheight-true-has-unnecessary-scrollbar-on-non-defaul

标签

jquery-ui

accordion