22

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

4
  • 2
    Wondering if any of the answers fixed the issue or not...
    – T J
    Commented Jul 21, 2014 at 10:45
  • This question is 5 years old and I’m way past the project where I had the question. Don’t really have a good way of how to vet the answers myself :(
    – Jaanus
    Commented Jul 22, 2014 at 11:10
  • But did you find a solution or moved on without fixing this issue in your project? When I ask a question and I find a solution myself, I post the solution to share it with other people and also reveal that a solution was found. But I understand that you asked this question on April 7, 2009, and I see that the answers are from 2010, 2011, 2012, and 2013. Projects usually cannot take that long. The answers came very late. Commented Sep 25, 2017 at 17:15
  • I have no recollection of this project, and what did I do there. Maybe it was abandoned before a solution became necessary.
    – Jaanus
    Commented Sep 26, 2017 at 10:52

11 Answers 11

52

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.

4
  • 2
    This answer fixed my problem.. The other answers (with the css overflow hack) fixed the problem but in turn caused another one: the smooth animations of the collapse of the currently open accordion panel became rigid and jerky.
    – EbbnFlow
    Commented May 22, 2013 at 20:52
  • 4
    heightStyle: content - for the win.
    – KSwift87
    Commented Jun 20, 2013 at 16:09
  • 1
    Ding ding ding! I guess this is new on jQuery UI as no autoHeight or clearStyle was mentioned in the API.
    – sampoh
    Commented Aug 5, 2013 at 9:07
  • I applied your solution and it solved the problem for me, but in my case I did not need to use clearStyle: true. Commented Sep 25, 2017 at 17:07
14

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

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

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

.ui-accordion .ui-accordion-content{
overflow:visible !important;
}
1
  • 5
    it works, but animation seems to be broken. Current content element overlaps with the accordion border during animation.
    – Maksim Vi.
    Commented Sep 21, 2010 at 19:02
10

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

jQuery("#accordion").accordion(
  {
    autoHeight:false
  }
);
2
  • 1
    Yes, it would be good if this would get more votes to move up the page. Commented Jan 24, 2013 at 23:21
  • This would handle most of the cases, however, when these is only one item in the accordion (at least that seems to be the reason), the scroll bar would still appears.
    – zw324
    Commented Apr 15, 2013 at 14:35
8

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

0
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

2
  • 2
    Out of all the answers for this question, this solution has no unnecessary scroll bar and animation is not broken. The height for each <div> however, is the same. Nevertheless, thank you for sharing this solution noah. +1
    – anon
    Commented Jun 26, 2012 at 22:52
  • Of all the answers, this was the only one that worked for me. Commented May 1, 2016 at 1:37
4

try this

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

3
  • 1
    Both overflow:visible !important and overflow:hidden !important seems to solve the scrollbar problem but messes with the animation.
    – TruckerG
    Commented Oct 6, 2011 at 11:46
  • I was only experiencing the problem in IE7 and overflow:visible !important and overflow:hidden !important seem to work for me, leaving the animation untouched. I'm using version 1.8.17 of jQuery ui. Commented Feb 28, 2012 at 9:49
  • Link only answers are highly discouraged in SO. Please add the key concepts in the answer itself.
    – T J
    Commented Jul 21, 2014 at 11:46
3

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

This works for me:

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

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>
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.