Dec 12

Depending on the size of the content in your accordions panes the default settings can result in content being longer than the available space and thus causing a scrollbar to be added. To avoid this try the following settings.

$j("#accordion").accordion({ 
    'fillSpace': true, 
    'clearStyle': true
});

written by Obiweb \\ tags: , , ,


15 Responses to “How to avoid scrollbars when using jQuery Accordion”

  1. revive Says:

    I tried this,.. with and without autoHeight: true and still get the scroll bars on initial page load.. upon activating the accordion, they disappear.. the only thing that got rid of them was adding this to my main CSS file:

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

    Any other thoughts on how to remedy this??

  2. revive Says:

    Correction… the best solution I’ve found was to set autoHeight to true and add this to the CSS (notice change in value)

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

  3. Samantha Mccormick Says:

    Hi, your blog is amazing. Although some parts are confusing, I still appreciate your writing techniques and expertise on the subject. Please keep sharing your ideas and thoughts.

  4. Dixie Says:

    Both – –
    .ui-accordion .ui-accordion-content{ overflow:visible !important; }
    and – –
    .ui-accordion .ui-accordion-content{ overflow:hidden !important; }
    worked for me.

    Thanks so much! Searched everywhere for this answer.

  5. Nonal Says:

    Thank you so much ! This discution saved my day !
    Only IE ( 7 ) was in trouble for me, FF worked fine.

    I just set autoheight: false and clearStyle: true + CSS
    .ui-accordion .ui-accordion-content{
    overflow:hidden !important;
    }

    and it was Ok.

    Thanks again

  6. Venus Maylone Says:

    5. Good day, As I used to be looking over the internet, I discovered this, your blog website. In fact most of the people comments are relevant and, you are brilliant in making write ups.

  7. rabby Says:

    Hi,
    Why don’t we simply overwrite the css
    height:auto!important;
    In Firefox this performs well and does not draw content over the borders and out of the div…
    Kind regards
    rabby

  8. Algirdas Says:

    Thanks guys, I guess that’s the only way to get rid of scrollbar – overwritting overflow params with ‘hidden’ or ‘visible’

  9. Ragnar Says:

    It works fine for me. Thanks.

  10. Pontus Says:

    Awesome, just what I was looking for. Thanks!

  11. Tony Says:

    Cheers, works perfect!

  12. Sergio Says:

    Thanks you guys! it worked fine for me too..

  13. Izzo Says:

    That did the trick.
    Much appreciated!

  14. Rick Hubka Says:

    Awesome. I played for an hour with different solutions till I found this. AAAHHhhh. Life is good again!

  15. Glen Says:

    Thanks Rabby,

    That did the trick!

    rabby Says:
    October 19th, 2010 at 11:49 am
    Hi,
    Why don’t we simply overwrite the css
    height:auto!important;
    In Firefox this performs well and does not draw content over the borders and out of the div…
    Kind regards
    rabby

Leave a Reply

You must be logged in to post a comment.