modal animation stuck in chrome with Bootstrap 3.0 and angular1.2

[pschulten]

Hi,
I'm using the modal directive from bootstrap3_bis2 which worked fine up to angular v1.2.0-rc.3. After upgrading to 1.2, the modal dialog doesn't display in chrome (and canary). It seems the animation is somehow stuck. The DOM inspector shows the element like:

<div class="modal fade ng-animate in-add ng-animate-start in ng-animate-active in-add-active" ng-class="{in: animate}" ng-style="{'z-index': 1050 + index*10, display: 'block'}" ng-click="close($event)" modal-window="" index="0" style="; -webkit-transition-property: none, clip; -webkit-transition-duration: 0.15s, 0.15s; ">
    <!-- ... -->
</div>

my current workaround is removing ngAnimate for now.

[DrHofman]

Have the same issue here

+1

[jgrund]

Base issue appears to be styles are overwritten due to: angular/angular.js#4869

[cthrax]

I think we're talking about the same issue, but I'm not sure. Here's a plunker demonstrating my issue, http://plnkr.co/edit/TgmuWPuiRDXEHxXFWbwe?p=preview. Which appears to be an issue with Bootstrap 3. Basically the modal does not appear.

IF this is the same issue, I don't think it's related to angular/angular.js#4869 as @jgrund points out, I have updated with the PR verified to fix that issue and there is no change.

[DrHofman]

Had a look at the plunker you posted it seems to be the same issue that is resolved by @deakster PR, I didn't use the PR just copied the line of code from it.

Also make sure you are using bootstrap3_bis2 branch the PR is for that branch not master

To make sure you have the same issue disable the ngAnimate module the modal should work without it. in your plunker you don't have ngAnimate so I think you are not using the bootstrap3_bis2 branch...

[cthrax]

I am using the released version 0.6.0, so that's probably the issue, I'll give bootstrap3_bis2 a look and post back here.

[phindmarsh]

I'm using the bootstrap3_bis2 branch, and had the same problem. Can confirm that changing the line in the @deakster PR fixes it.

[wesleycho]

+1 to this issue as well. I had to fall back to the Bootstrap 3 JS for a website I'm working on to be released on Tuesday.

[apraditya]

Which PR is this?

[cthrax]

@apraditya deakster/angular.js@2a8f114

[fotomut]

just to confirm, deakster's fix from @cthrax's #1251 (comment) works for me

[nolandubeau]

I noticed that there isn't a branch in this repo called 'bootstrap3_bis2'. Has this been renamed or changed to something else?

[pkozlowski-opensource]

It was renamed to https://github.com/angular-ui/bootstrap/tree/bootstrap3

[nolandubeau]

Thanks Pawel. I'm confused as to if this issue is the same from the previous Bootstrap 3 thread. The issue i'm having is that I don't see the modal being loaded. I see the backdrop, and if I hit escape I see the logging that the modal is dismissed. Is there a working fix which simply gets the modal working with BS3 and the latest version of Angular? Thanks.

[phindmarsh]

@nolandubeau the deakster fix (mentioned above) fixes this. If you can't wait for the fix to be pushed through, apply the patch as shown here: deakster/angular.js@2a8f114

[nolandubeau]

I should note that if I inspect the DOM I can see the modal (in code), but it doesn't render. @phindmarsh can you explain the steps to apply that patch? Do I need to download the angular src, make that change, and then compile a new version of angular.js? thank you.

[phindmarsh]

It depends on how you are using it, for me it was a case of replacing the offending line in angular-animate.js (the line in red in the PR), with the line from the PR (the one in green). Obviously this means if you update the library code at some point and that change is not applied it will break the modal again. I figured once the next update happens it will include this patch so it won't matter.

[nolandubeau]

Okay, I'm getting closer on solving this. I thought I would simplify things and put together a plunkr which takes it out of the context of my app. Here it is - http://plnkr.co/edit/UrDvWUDn4s69Owkuayew?p=preview Problem is now that it's now throwing 404 errors when trying to locate the templates used in the modal. How can I get around that in Plunkr? When I run grunt build on the bootstrap3 branch should I be passing in arguments to compile the templates into JS? Thanks again.

[nolandubeau]

I've updated the plunkr to use ui-bootstrap-tpls-0.7.0-SNAPSHOT.min.js as I see this is the way you include the templates in the directive. Now when I run the plunkr I get the following error:

Uncaught Error: [$injector:modulerr] Failed to instantiate module plunker due to:
Error: [$injector:modulerr] Failed to instantiate module ui.bootstrap due to:
Error: [$injector:modulerr] Failed to instantiate module ui.bootstrap.tpls due to:
Error: [$injector:modulerr] Failed to instantiate module template/accordion/accordion-group.html due to:
Error: [$injector:nomod] Module 'template/accordion/accordion-group.html' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Does ui.bootstrap.tpls need to be injected as well? I tried doing that but the issue persisted. Thanks.

[cthrax]

You're getting that error because of the include order in the html page, if you put angular above the other angular libraries, you at least get back to it breaking. However, it looks like you do not have the fix in place, as the modal is still broken.

Spend some time over here http://docs.angularjs.org/misc/contribute , so you can get a build out of angular and then include the resulting build rather than the CDN version.

NOTE: It looks like you are trying to fix this problem in angular-ui-bootstrap, the issue is not in there, but in angularjs itself, as the PR above demonstrates. Having said that, you do need to be using the angular-ui-bootstrap "bootstrap3" branch, as also noted above.

[erhanfirat]

Modal efects are so problematic for me. I am using angular-1.2.1, and ui-bootstrap 0.6.0...

I added these css to open modal correctly:

// fade efekti hatasını düzenlemek için oluşturulan classlar
.modal.fade {
-webkit-transition: opacity .15s linear, top .25s ease-out;
-moz-transition: opacity .15s linear, top .25s ease-out;
-o-transition: opacity .15s linear, top .25s ease-out;
transition: opacity .15s linear, top .25s ease-out;
}

.modal-open{
overflow:visible;
}

.modal .modal-body {
overflow-y: auto;
}

I couldn't understand that if it does not have fade out effect on closing. In prev versions, there are some properties such as "backDropFade: true". On this version it disappears suddenly, not cool way.

[chrisirhc]

Angular 1.2.2 should've fixed this. I did a quick manual verification, but someone else should re-verify.

[pferrel]

I'm definitely having this problem. Modal died when I upgraded to bs 3.

Is there a build of the bootstrap3 branch? I patched the Angular source and tried the newest 0.7.0 hoping that would contain the fix. No luck so for others, here's what it takes:

1. make the patch to angular described above.
2. clone this repo for ui-bootstrap
3. download and install the build tools described in the readme
4. git checkout bootstrap3
5. build with grunt
6. move the combined ui-bootstrap-tpls-0.7.0-SNAPSHOT.js to your project

works for me

[DrHofman]

Angular 1.2.2 includes the patch

[pkozlowski-opensource]

@chrisirhc @DrHofman thnx for looking into this and verifying that AngularJS 1.2.2 fixes stuff.
For people using BS3 - you need to manually build content of the bootstrap3 branch till it is released.

[pferrel]

Which release will the bootstrap3 branch be in?

[pkozlowski-opensource]

@pferrel aiming for 0.8.0. There are just few issues left:
https://github.com/angular-ui/bootstrap/issues?labels=Bootstrap+3.0&state=open

so any help would be highly appreciated!

[chaosim]

I have the same issue with angular-bootstrap 0.7.0 + bootstrap 3 + angular 1.2.2.

[nolandubeau]

Hi folks,

Still struggling with this...

Here is an example that doesn't work and uses a build produced from the bootstrap3 branch
http://plnkr.co/edit/i4T0mtnSDHxoQW2f7lzy?p=preview

I can't get past the injector error.

I also tried testing with the 0.8.0 build and I get the same injector error. Any ideas?

Thanks.

Nolan

[pkozlowski-opensource]

@nolandubeau you plunker seems to by using standard 0.7.0 release and not the custom build with BS3 support. On top of this it is using AngularJS 1.2.2 which has tons of bugs in the animation module. Build the bootstrap3 branch and switch to AngularJS 1.2.3

[nolandubeau]

Hi Pawel,

Sorry I copied the wrong Plunker. Here is the correct one - http://plnkr.co/edit/9bxNMn8HStXLWqbn7Th4?p=preview

which is also using 1.2.3. Same injector error.

[pkozlowski-opensource]

@nolandubeau I don't know from where you've copied content of the supposedly BS3-specific code but your plunk does not have code from the current bootstrap3 branch. Here is a plunk forked from the demo page from the boostrap3 branch: http://plnkr.co/edit/ZxNDzllqax7btIbzHWH1?p=preview

I was trying to fix your plunk but there were so many problems that given up :-/ At least I hope that you are aware of the fact that you don't need jQuery not bootstrap's JavaScript to use directives from this repository....

[boonkerz]

I have the same issue. the problem ist that
grunt build not include into the tpl files:

angular.module("template/accordion/accordion-group.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/accordion/accordion-group.html",
    "<div class=\"panel panel-default\">\n" +
    "  <div class=\"panel-heading\">\n" +
    "    <h4 class=\"panel-title\">\n" +
    "      <a href=\"\" class=\"accordion-toggle\" ng-click=\"isOpen = !isOpen\" accordion-transclude=\"heading\">{{heading}}</a>\n" +
    "    </h4>\n" +
    "  </div>\n" +
    "  <div class=\"panel-collapse\" collapse=\"!isOpen\">\n" +
    "     <div class=\"panel-body\" ng-transclude></div>\n" +
    "  </div>\n" +
    "</div>");
}]);

this. in your example it is included oO

[boonkerz]

Ok when i use grunt watch its produce the right javascript file @nolandubeau

[pkozlowski-opensource]

@boonkerz what was the exact Grunt command that you've used when the build was producing files without the accordion templates?

[boonkerz]

grunt build or grunt dist both are not working for me

[pkozlowski-opensource]

@boonkerz those tasks are not meant to be used alone. The proper way of building the project is described here:
https://github.com/angular-ui/bootstrap#build

The best way to build is the simplest as well: just run grunt.

[boonkerz]

Thx i think the issue is closed :D