Owlcarousel2: owl breaks bootstraps modals

[stxxo]

OwlCarousel2 breaks Bootstrap v3.3.6 modals
Modals are worked fine with owl.carousel.2.0.0-beta.2.4
Changing just the sources (css+js) in my bootstrap code from owl2.0-beta to owl2.1 breaks all modals. The screen fades out (to grey) but the modal doesnt appear on the screen.

Using the standard Bootstrap modal as seen here
http://getbootstrap.com/javascript/#modals

[daviddeutsch]

I have it working in my test environment where I specifically use it in a bootstrap modal.

(Sorry about the partly canned reply.)

Please add a link to a page where I can verify this error. You can use a service like plnkr, jsfiddle, jsbin or codepen.

[stxxo]

David, at first thanks for your reply and of course for your work with owl! My project is not public yet so it (ort parts) cannot be uploaded for testing. I will check it again with a bootstrap from scratch.

[daviddeutsch]

Yeah, it should definitely work. Let me know when you have a test set up!

[danilowm]

news about this bug?

[mcauser]

Disabling bs transitions makes the modals show again:
$.support.transition = false
https://getbootstrap.com/docs/3.3/javascript/#transitions

[samturrell]

For anyone who finds this issue, it's fixed in my fork: https://github.com/samturrell/OwlCarousel2

npm install samturrell/OwlCarousel2
or
yarn add samturrell/OwlCarousel2

[samturrell]

Happy to do a PR for this repo @daviddeutsch - but doesn't look like it's actively maintained anymore.

[alextiley]

Had the same issue - only seemed to happen to us after running uglify on our scripts. We tried the fork but that didn't work for us. Rolling back to owl.carousel.2.0.0-beta.2.4 did the trick.

[henryschmieder]

@daviddeutsch any idea when a fix will be released? Owl 2.3.4 , BS 3.3.7

[pascalporedda]

@fiveDust Provide me an example where I actually see what you guys mean. I've got several Owl Carousels working in BS Modals for a few clients, so I don't really know what your problem is here.

[joeainsworth]

I also have this error when using the bootstrap modal component.

Uncaught TypeError: this.$backdrop.one(...).emulateTransitionEnd is not a function

When removing Owl Carousel the bootstrap modal works again.

[byvalentino]

I copy joeainsworth, same here.

[nyn05]

Hi, I have this error when I want to call Bootstrap modal in page load and Owl js file added to my project.
when the page loaded, the body gets "modal-open" class and body don't scroll.
When removing Owl Carousel js file, the bootstrap modal works again.

demo: https://codepen.io/ghaem/pen/mzOLey

[schryised]

Hi, I was experiencing the exact same issue on a NodeJs SPA app. The problem was the Owl Carousel js file was being imported more than once, which somehow is causing a conflict with the Bootstrap Modal hide event, specifically, when transitions were enabled (transitionend).

Disabling transitions helped by doing:
$.support.transition = false
but it looked ugly and the modals were just snapping.

Ensuring the owl js script was loaded once for the entire app and applying the fix from https://github.com/samturrell/OwlCarousel2 by @samturrell did the trick for us.

Hope this helps.

[garmashdev]

I found a solution.

1. Edit owlcarousel.js
2. Make Code Refactoring:
   rename all "$.support.transition" to the "$.support.owltransition"

[hootsy90]

news about this bug? Had the same issue - happen to us If using bootstrap.js and owl, after running uglify on our scripts.

[garmashdev]

@hootsy90
Just rename all enters of "$.support.transition" to the "$.support.owltransition" in owlcarousel.js file, don't use minify version of file.

[hootsy90]

@garmashdev
Thank. I saw your message. But I would like the developers to take this into account in their future release. It is inconvenient to manually constantly make such changes.

[cseas]

Owl Carousel v2.3.4 didn't seem to break any modals for me until I used one inside the Owl Carousel code. Below is a snippet of how I used the modal.

<div class="item">              

    <div data-toggle="modal" data-target="#myModal">
        <img src="/assets/img/test.jpg"> 
    </div>

    <div class="modal fade" id="myModal" style="display: none;">
    / * Modal code */            
    </div>

</div>

This gave me the same issue. Screen faded on click but modal content did not appear. All I had to do for fixing this was move the modal <div> to before the Owl Carousel code in my HTML and the modal started working fine.

Owl Carousel still seems to break the modals that are defined inside the Carousel code.

[herbertneutron]

this worked for me ..thanks