I am using Quicktabs7.x-3.6, and have been for sometime without issue. Recently it stopped working (does none of the accordion actions revealing a form) it had done so well. I was experimenting with a few new modules and responsive designs at the time, so it took a while to find the culprit.

The culprit appears to be the jQuery Update 7.x-2.4 module. Enabling this module causes my quicktabs do stop doing anything. It also causes a minor but visible UI change (please see attached screenshots).

I am in the process of implementing the bootstrap 3 theme, which is why I installed jquery_update.

This appears to be in direct conflict with the functionality where a horizontal menu becomes a vertical menu that is compressed, when the view port shrinks (this is a jquery process), as in Bootstrap 3. So the upshot is the same functionality that drives the responsive menu change also breaks the quicktabs.

CommentFileSizeAuthor
#13 jq2.6_quicktabs_suddenly_too_high.PNG13.4 KBlongtom
quicktabs-jquery_update_enabled.png6.8 KBlongtom
quicktabs-jquery_update_disabled.png15.81 KBlongtom

Comments

longtom’s picture

longtom commented

(added note above)

longtom’s picture

longtom commented

(added note above)

longtom’s picture

longtom commented
Issue summary: View changes
netw3rker’s picture

netw3rker commented

Can you try this against 7.x-3.x-dev then let us know?

longtom’s picture

longtom commented

Hello netw3rker... I installed 7.x-3.x-dev this morning, enabled jquery_update, cleared cache. Still does not work.

I do have some hopefully useful info, however:

The functionality seems to degrade according to the version of jquery I use.

jquery version 1.5 the quicktabs work fine (they expand and do not have the extra line break), but the horizontal responsive menus do not work.
jquery 1.7, 1.8 BOTH items work, although the quicktabs now have the extra line break in them.
jquery 1.9 1.10 the responsive menu works, but the quicktabs no longer work

hope this is informative.

netw3rker’s picture

netw3rker commented

That is helpful! Also, do you get any console errors?

(just in case you don't know what console is or how to use it, here's info for Firefox: http://www.howtogeek.com/105320/how-to-use-firefoxs-web-developer-tools/ , and Chrome: https://developer.chrome.com/devtools/docs/console )

longtom’s picture

longtom commented

Yes, there are some in each version.

1.5
Use of getAttributeNode() is deprecated. Use getAttribute() instead.
[on mouseover the quicktabs] Use of getPreventDefault() is deprecated. Use defaultPrevented instead.

1.7
Use of getPreventDefault() is deprecated. Use defaultPrevented instead.
[on clicking a tab] TypeError: $target.offset(...) is null

1.8
Use of getPreventDefault() is deprecated. Use defaultPrevented instead.
[onlicking a quicktab]
Error: Syntax error, unrecognized expression: [name="quickset-inquiries_0"] (my tab is called 'inquiries')

1.9 [now fully broken]
TypeError: c.browser is undefined
Use of getPreventDefault() is deprecated. Use defaultPrevented instead.

1.10
[now fully broken]
TypeError: c.browser is undefined
Use of getPreventDefault() is deprecated. Use defaultPrevented instead.

longtom’s picture

longtom commented

any thoughts about this?

cehfisher’s picture

cehfisher commented

I'm seeing the same issue using the latest version of Bootstrap, Quick tabs 7.x-3.6, and version 7.x-2.4+5-dev of jQuery Update. I will report back if I find any solutions.

longtom’s picture

longtom commented

Just checking in. Is there a workaround for this?

longtom’s picture

longtom commented

For this remaining issue, I think you just need to place the following in your css:

.ui-icon {
display: inline;
}

stephng’s picture

stephng commented

I am having the same issue. It seems that /misc/ui/jquery.ui.tabs.min.js is not loaded at all. Is there any fix for this already? Thanks!

longtom’s picture

longtom commented
StatusFileSize
new jq2.6_quicktabs_suddenly_too_high.PNG13.4 KB

UPDATE:
A New jquery update module has been released (7.x-2.6). Unfortunately, this is breaking my quicktabs in a new way, making my tabs expand to extremely tall (it seems to be adding

element.style {
display: block;
height: 621px;
}

So I have not placed this in production for several months. (but some modules are requiring it now).

It seems this height attribute is getting added in code somewhere, but I am unsure where. (screenshot attached).

longtom’s picture

longtom commented

This issue was addressed in a new patch at https://www.drupal.org/node/2534684/

nwom’s picture

nwom commented
Version: 7.x-3.6 » 7.x-3.x-dev
Status: Active » Closed (duplicate)

This issue is solved with the following patch: #2534684: Quicktab Accordion Autoheight setting not correctly applied with new versions of jQuery UI