Hi all,

On my test page here the first accordion (which is the demo text with three headings of the same length) works correctly. In the second accordion I have made the first heading content longer than the others and this seems to have an unwanted side effect:

with auto height:true,
the shorter headings have a lot of empty white space below (I think from copying the height from the first heading)

with auto height:false

With the headings all starting as collapsed, if I click any heading it works ok. If after opening a heading I close it and then open another heading it works ok. But if I open one heading eg the first and then without closing it click on a lower heading eg the third = I get pushed down the page to lower content or to the footer.

Any ideas please?

Thanks...

CommentFileSizeAuthor
#12 accordion_height_issues-2128487-12.patch602 bytescmanalansan

Comments

mediaformat’s picture

mediaformat commented

Similar issue :
debugging with uncommented console.log(options)
I can see autoHeight:false, yet the accordion opens height of tallest content.

Possibly related to jQuery update >1.6 : #2073491: Add autoheight and heightstyle for newer JQuery UI versions, #2084055: Autoheight won't go away with JQuery 1.7 or 1.8

mediaformat’s picture

mediaformat commented
Component: User interface » Code
hmartens’s picture

hmartens commented

I updated to jquery 1.9 as the related article said but that didn't change anything. What is everybody else doing to get the autoheight to disable?

Thank you

hmartens’s picture

hmartens commented

Ok I found on another forum the work around to this. I've added the following CSS and that fixed the autoheight problem:

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

carsonw’s picture

carsonw
handsome / brilliant
commented

The Views Accordion module was experiencing the same issue at #2084055: Autoheight won't go away with JQuery 1.7 or 1.8.

The heightStyle variable needs to be set to content.

For example:

options['heightStyle'] = 'content';

For the time being, I hard coded this into jquery_ui_filter_accordion.js just above the following:

    // Save options as data and init accordion
    $(this).data('options', options).accordion(options);
codenamerhubarb’s picture

codenamerhubarb commented

Thanks carsonw, my accordion is now fully responsive and has no pesky scrollbar.

sketman’s picture

sketman commented

#5 worked for me to, thanks!

jrockowitz’s picture

jrockowitz commented

This is a tricky issue to fix because D7 core ships with jQueryUI 1.8 which uses an 'autoHeight' option while newer versions of jQueryUI uses a 'heightStyle' option.

The D8 version of this module should probably support a more flexible way to set custom options so that multiple version of jQueryUI can be supported.

jrockowitz’s picture

jrockowitz commented
Status: Active » Closed (won't fix)
juc1’s picture

juc1 commented

#5 worked for me, thanks...

knard’s picture

knard commented

Here's another option that worked for me in D7. You can go into jquery_update folder under replace/ui/ui/minified directory and changing the options in the jquery.ui.accordion.min.js file.

The 'heightStyle' option was set to "auto". Once I changed that to "content" my dropdowns adjusted to the content perfectly.

cmanalansan’s picture

cmanalansan commented
StatusFileSize
new accordion_height_issues-2128487-12.patch602 bytes

Comment #5 worked for me, so I made it a patch.

Thanks @carsonw!

kingfisher64’s picture

kingfisher64 commented

Many thanks for the solution it works lovely.

petertoen’s picture

petertoen commented

#4 worked fine for me, thanks a lot!

brightbold’s picture

brightbold
she/her
Primary language English
Location Boston, MA
commented
Category: Support request » Feature request

Thanks @cmanalansan for the patch in #12! Solved the problem perfectly.