Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bootstrap isn't bulletproof? #3436

Thetjo opened this Issue May 10, 2012 · 7 comments


None yet
6 participants
Copy link

Thetjo commented May 10, 2012

Problem: When both jQuery and MooTools are loaded, Twitter Bootstrap seems to be running code from the MooTools library.

Demo (minimal):

  1. Please go to the demo page (note the loading order, the latest versions of all libraries being used and noConflict() already in place).
  2. Drag the browser screen small until the menu items disappear and the menu icon appears.
  3. Click the menu item to open the dropdown menu, and click it again to close it back up.
  4. The menu immediately disappears (without the normal smooth slide-up effect) and can't be dropped down again (Mac OS Lion Chrome) or can be dropped down again, but upon making the browser wide again the menu items never appear back (Mac OS Lion Firefox).

I boiled this behavior down to line 3139 of mootools-more.js in their hide() function, which apparently is being run (something a simple alert() right before line 3139 would show).

If this is a 'MooTools issue' instead of a 'Bootstrap issue', please let me know so I can post the issue on their bug tracker.



This comment has been minimized.

Copy link

envex commented May 10, 2012

Why are you running both libraries?


This comment has been minimized.

Copy link

Thetjo commented May 10, 2012

Because MooTools is included in Joomla by default and it's nearly impossible to remove all MooTools libraries and references from the code. jQuery is required by Bootstrap (and a great JS library). If it were up to me MooTools was buried in a deep hole, never to be found again.


This comment has been minimized.

Copy link

mdo commented May 12, 2012

Sorry, we can't offer support on the presence of two conflicting javascript libraries. Seems like more of a mootools issue based on what you've stated.

@mdo mdo closed this May 12, 2012


This comment has been minimized.

Copy link

phproberto commented Jun 5, 2012

I've also the error reported by Thetjo. Just found this issue searching before posting it as new.

Extended data: This issue only affects Google Chrome and is related to the hide transition. Conflicts with function Events.Pseudos in mootoos-more file.

Hide transition fails and never gets marked as completed. Got it working commenting:

  if (this.transitioning) {

in show function from bootstrap-collapse.js

Obviously the transition is still broken but menu collapses as expected.

As bootstrap is going to be included in Joomla 3.0 I'll try to fix it. Any help is appreciated. I'm still a mootools man :)


This comment has been minimized.

Copy link

phproberto commented Jun 5, 2012

Seems I've found a way to get it working but as jQuery n00b I'm not going to make a pull request because I'm sure there is a better way to solve it.

My n00b solution is to avoid using the event name that creates the conflict with mootools:

In bootstrap-collapse.js replace:

this.transition('removeClass', $.Event('hide'), 'hidden')


this.transition('removeClass', $.Event('hideme'), 'hidden')


This comment has been minimized.

Copy link

jatitoam commented Jan 3, 2013

Anyone else wondering this, the problem is a pure conflict between mootools-more and jQuery
I created a small Mootools function for removing the hide() Mootools function from the toggle elements. So far it's working.

(function($) {
$$('[data-toggle=collapse]').each(function (e) {
$$(e.get('data-target'))[0].hide = null;


This comment has been minimized.

Copy link

florian-denizot commented Mar 21, 2013

And it helps. Thanks for sharing Jatitoam

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.