5

I have just updated my project's jQuery from 1.9.2 to 1.11.2 and everything seems to be working fine except that my accordion is now so large that I cannot see the content. Prior code:

$('.accordion').accordion({
    autoHeight: false,
    fillSpace: true,
    collapsible: true,
    navigation: true
});

As autoHeight, fillSpace and navigation are all deprecated I have updated this to...

$('.accordion').accordion({
    heightStyle: "fill",
    collapsible: true
});

Now I have massive margins below each closed accordion tab and the text is huge. A quick search of the resulting code shows that the only thing that is missing is the ui-helper-reset class on the h3-element (i.e. .accordion has it, all my content divs have it, but all h3-elements do not).

If I add the class by hand the headers look like they did before. Any ideas on how to get the class to be added?

Update

This is an internal issue. There is an old custom jQueryUI CSS file (1.8.23) that is messing everything up. I looked at jQuery UI accordions CSS that is generated and the ui-helper-reset is no longer being added to header. Which works, if you do not have an old custom CSS file in the way.

PunkCode
  • 69
  • 7
  • icymbi: I just changed the code in jquery-ui.js from `_processPanels:function(){ this.headers=this.element.find(this.options.header).addClass("ui-accordion-header ui-state-default ui-corner-all")` to `_processPanels:function(){ this.headers=this.element.find(this.options.header).addClass("ui-accordion-header ui-state-default ui-corner-all ui-helper-reset")` – Coty Embry Oct 30 '19 at 21:41

2 Answers2

1

how about .addClass()? 

$('.accordion').accordion({
    heightStyle: "fill",
    collapsible: true
}).find("h3").addClass("ui-helper-reset");
Banana
  • 7,424
  • 3
  • 22
  • 43
  • This will make the headers the right size, but, as I am using heightStyle fill, the content will still be sized as if the headers where not reset. However, your question helped me find the actual answer so thanks for that! :) (see update) – PunkCode Nov 27 '14 at 14:32
  • code is used on a bunch of pages, cant edit every single function call. can i yes. am I going to? no. – Coty Embry Oct 30 '19 at 21:28
0

The solution, if you get a similar issue is to update your jQuery CSS. I found out how to do that here: How to upgrade a custom jQuery UI theme?

Community
  • 1
  • 1
PunkCode
  • 69
  • 7