Twitter

Follow us on Twitter

Recent Comments

  • Dixie: Both – - .ui-accordion .ui-accordion-content{ overflow:visible !important; } and – - .ui-accordion...
  • Quentin Rella: article, worthy to command. It’s everything here exactly what I need to know.
  • Kishor Kumar: Thankyou Your tip works. Thankyou very much.
  • steve: I need to convert “binary to byte array”. I wanna convert photo file to byte array -> binary...
  • David Zalkin: I have done this, however the message-ID I supply is not recognized when sending mail using Gmail...

Tags
Dec 12

How to avoid scrollbars when using jQuery Accordion

javascript, jquery Add comments

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 objects \\ tags: , , ,


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

  1. 1. revive Says:
    March 10th, 2010 at 11:43 pm

    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. 2. revive Says:
    March 10th, 2010 at 11:58 pm

    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. 3. Samantha Mccormick Says:
    May 14th, 2010 at 12:50 pm

    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. 4. Dixie Says:
    August 30th, 2010 at 12:31 am

    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.

Leave a Reply