How can you adjust the height of a jQuery UI accor

Question

In my UI I have an accordion setup like this:

<div id="object_list">
    <h3>Section 1</h3>
    <div>...content...</div>

    // More sections
</div>

The accordion works properly when it is first formed, and it seems to adjust itself well for the content inside each of the sections. However, if I then add more content into the accordion after the .accordion() call (via ajax), the inner for the section ends up overflowing.

Since the accordion is being formed with almost no content, all the inner divs are extremely small, and thus the content overflows and you get accordions with scrollbars inside with almost no viewing area.

I have attempted to add min-height styles to the object_list div, and the content divs to no avail. Adding the min-height to the inner divs kind of worked, but it messed up the accordion's animations, and adding it to the object_list div did absolutely nothing.

How can I get a reasonable size out of the content sections even when there is not enough content to fill those sections?

Answer 1

It looks like all the answers here are now using deprecated options.

With the latest version of jQuery UI (1.10.x), you should initialize your accordion with heightStyle: "fill" to get the intended effect..

$(".selector").accordion({ heightStyle: "fill" });

You can read more at the jQuery UI API docs here: http://api.jqueryui.com/accordion/#option-heightStyle

If your page dimensions change dynamically and you need to recalculate your accordion size, you should refresh your accordion using the refresh method:

$(".selector").accordion("refresh");

This is preferred as the resize method is now deprecated.

Answer 2

autoHeight was deprecated in 1.9, and removed in 1.10.

Use:

$('#id').accordion({heightStyle: 'content'});

to auto size your inner div.

UPDATE:

I see that this is still quite an active post, so I decided to make sure my answer is still valid. It looks like this may no longer work in jQuery UI 1.11. It notes that the [content] property has been deprecated, and to use [panel] instead. Making the code snippet now look something more like this:

$('#id').accordion({heightStyle: 'panel'});

I HAVE NOT YET TESTED THIS, JUST FOUND, AND WILL RETURN AND REMOVE THIS COMMENT WHEN I HAVE TIME TO TEST

Answer 3

Just call the accordions .resize() method, this will recalculate its size. http://docs.jquery.com/UI/Accordion#method-resize

Answer 4

I recently set up an accordion that retrieves content via ajax when a tab is activated and ran into the same problem. I tried using some of the suggestions posted here, but they never quite grew the panel correctly until I set the heightStyle to content.

$("#myaccordion").accordion({
  heightStyle: "content",
  activate: function(event ui) {
    //use ajax to retrieve content here.
  }
});

I'm using jQuery-UI version 1.10.4.