Accordion height fixed size since upgrade to WordPress 3.6

I’m having the same issue after the WP 3.6 update.

Oh my yes!!!! Terrible problem. Same issue for me.

Quick hack to fix…

Change line around 700 (of dev version) from
options.autoHeight = this.o.autoHeight ? true : false;
to
options.heightStyle = this.o.autoHeight ? "auto" : "content"

Part of the _init of the Accordion.

Thanks jdlintz

which file is that?

jdlintz, I found the file but the hack isn’t working

Any idea

Same issue, here’s the fix. wp-ui.dev.js isn’t the file that’s actually being included on the page (at least in my install). The file that’s being used is wp-ui.js, which is minified and beyond my editing abilities. So here’s one fix that’s working for me (with a caveat below):

1. Make the above described change to wp-ui.dev.js, replacing
   options.autoHeight = this.o.autoHeight ? true : false;
   with
   options.heightStyle = this.o.autoHeight ? "auto" : "content";
2. Copy and paste the modified contents of wp-ui.dev.js into wp-ui.js
3. You can now minify this file if you want.

So this fixes the issue of unchecking the “Uniform accordion panel height.” having no effect whatsoever. Now when you uncheck it, your accordions tabs will each expand to their proper height.

Caveat: However, when I do check the box to have uniform height on all accordion tabs, the tab height seems to be calculated incorrectly. What happens is that the tallest tab is cut off, with tab height being set much shorter than the actual contents of the tab. I’m still working on figuring this one out and will post whatever I can find.

Hope this helps!

I tried this fix and made the change in the wp-ui.dev.js page but, was not sure exactly what to do after that.

Do I take only the modified line and paste it into the wp-ui.js page and if so, where do I paste it? That is one illegible page.

Sorry, I’m new at this.

Thanks in advance.

Thanks McGuive7!!!!

Did exactly as you had instructed and it worked quite well without any problems.

I replaced the –

options.autoHeight = this.o.autoHeight ? true : false;

line with –

options.heightStyle = this.o.autoHeight ? “auto” : “content”;

and, I had to unminify the wp-ui.js file before I could paste the change. The change is not identical to the one just above. This is what it looks like at about line 439.

c.heightStyle = this.o.autoHeight ? “auto” : “content”;

Anyway, the content heights are now according the amount of content of each panel. What a relief

Hi Amalux,

Sorry for the delay. Yes, as you mentioned, the unminified version of wp-ui.js is not identical to wp-ui.dev.js, so edits will be different. Thanks for laying it out clearly for everyone else who stumbles upon this post.

No Prob and thanks. Given that I come from the “intuitive” school of coding it was more a matter of feel and sense that this worked.

McGuive? is there a place that will show how to use the menu options already created in the jQuery themes and place them onto a page?

Not sure exactly what you mean – are you referring to using jQuery themes? If so, these references might help?

WP UI Theme Usage
https://kav.in/wp-ui-using-jquery-ui-custom-themes/

Creating Custom Themes
https://jqueryui.com/themeroller/

If not, can you clarify what you’re referring to?

I’ve created the theme I want and the accordion worked perfectly. But, in the process of creating the theme it also shows the same theme applied to tabs, accordions, buttons and also menus. I noticed the the CSS is already in the files for menus but there is not way of implementing them using the UI field in the page edit area. Is there a way of creating or including a menu field so that it can easily be place onto a page?

I’m not sure exactly what you mean by “menus,” as I’ve never used jQuery/WP UI on menus. Can you clarify what that means, or perhaps include a link to your site with a description of what we’re looking at?

You may very well already be aware of the following, but here are a few suggestions/question that may pertain to your issue:

1. Are you specifying the appropriate “style” attribute in your WP UI shortcodes? E.g. [wptabs style=”your-custom-them-name”]

2. I’m curious, how are you implementing your menus, since WP UI doesn’t include shortcodes for menus?

3. Have you tried modifying the CSS you downloaded? You can always just modify the styles as need be.

Let me know if you still need help – if so, a link and some further clarification would be helpful.

My problem is that I am migrating from Dreamweaver to WordPress. I currently have a sidebar with navigation menus plus page content navigation menus needed to navigate between pages of specific categories. To put all those links onto the side bar would not work. They need to be page and page grouping specific.

The WP-UI plug in creates the theme colors for more than just accordions and tabs. It also creates CSS styling for navigation menus and I’d like to use that to keep the theme colors uniform throughout my site.