Accordion Element has fixed height in HTML

I don't know why this is the case, I don't see why anyone would want massive space but guess there is a use case somewhere. Anyhoo, for me, I did this:

heightStyle: "content",

to this:

Drupal.FieldGroup.Effects.processAccordion = {
  execute: function (context, settings, type) {
    $('div.field-group-accordion-wrapper', context).once('fieldgroup-effects', function () {
      var wrapper = $(this);
      wrapper.accordion({
	heightStyle: "content",
        autoHeight: true,
        active: '.field-group-accordion-active',
        collapsible: true,
        changestart: function(event, ui) {
          if ($(this).hasClass('effect-none')) {
            ui.options.animated = false;
          }
          else {
            ui.options.animated = 'slide';
          }
        }
      });

from field_group.js file. It worked for me anyhow.

Thanks,
Paul.

This bug is still present in version 7.x-1.4.

However, the fix shown in #1 also works for me with 7.x-1.4.

Patch for fix in #1

adding

heightStyle: "content"

as suggestd by #1 worked for me. I have multiple accordion items and they were all showing up as the same height, rather the the height of the content they contain. Now it works as expected, each accordion item when open is the height of the content it contains.

I would suggest we commit this, its a pretty ugly bug right off the bat.

The patch in #5 is not formatted correctly, so it would not apply for me. Also, I noticed there was already a 'autoHeight: false' setting. I couldn't find documentation for this setting anywhere, so the attached patch replaces that setting with the 'heightStyle: "content"' setting.

My accordion, when opened, has height: 0, so I cannot see the content. Can't override this with CSS even.

What to do to show children content?

EDIT: I was making mistakes with css selectors, my bad. I used

.ui-accordion-content {
			height: initial !important;
		}

and it displayed correctly, enlarging both width and height.

EDIT 2:
Apparently you also have to set

.ui-widget {
		font-family: inherit !important;
		font-size: inherit !important;
	}

otherwise jQuery calculates height incorrectly.

I have a question anyway, why did they put a custom styling code like this??

.ui-widget {
font-family: Verdana,Arial,sans-serif;
font-size: 1.1em;

Why should accordion change the look of my site, I don't get it. It can brake things and make us spend time to re-enable our styling.

kopeboy, I noticed the same issue. I was using jQuery Update and the height was being set to 0px when using a version of jQuery higher than 1.5 for admin.

Thx for the patch, i have committed it to dev. Also gonna put it into the D8 version.

Confirming that the dev branch fixes this issue for me in 7.34. Thanks!

This bug (or a variant of it) is still present: I just downloaded 7.x-1.x-dev and installed it.

It looks to me as if all the windows in the accordion are given the same size. I have two windows: one with 3 lines of text, the other containing a table ~40 rows of data. The HTML of both windows includes style="height: 1883px;...", which looks ridiculous in the case of the window with 3 lines.

Steve

Hi,
as mentionned in #15, i found out that the patch merged in #11 is in 1.x version (but not yet on a release, i guess it will be there for 1.5)
but it isn't present in the 2.x version yet
++

Patch in 8 worked for me. Would be great if this was commited.

As per #10, I'm also running jquery update and everything works if I set it to 1.5. Anything above that breaks the accordion menu. That said, it also breaks if I tick the 'Autoheight' setting.

patch #8 also works for me (was broken afterupdate of jquery_update module)

For those still encountering this in 7x-dev and 7x-1.5, see the patch at #2649074: Accordion height breakage for those not using jQuery update

+1 to # 20, patch #8 did not worked for me, but with #20 it did worked well.

This is related: I cannot find a way to fix the font-size of the accordion headers without using JS.. :/

.ui-helper-reset CSS set it at 100% but it's way too small (it's an <a> inside a <h3>, should be bigger).. It makes the header smaller than the content inside the accordion usually (depending on the theme you use).

..Might you fix both together?