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

无人久伴 提交于 2019-11-30 06:39:10
user2170518

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.

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

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

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

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

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

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

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

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

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

This works for me:

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

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>

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.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!