14

We're trying to migrate from Bootstrap 2.3.2 to Bootstrap 3 (RC1) and are having problems with the AngularJS Dialog directive. On clicking the relevant button no dialogue popup appears (the page appears black. Clicking anywhere returns to the original non-black view).

We're essentially using exactly the same code as in the above link.

There is a known issue discussed here. In that discussion Luther suggests:

"to have modal worked, add hide class to set display:none to modal and reset the modal's display to block"

That unfortunately doesn't seem to make any difference. What alternatives could we use to get the dialogs appearing in Bootstrap 3 RC1?

I've tried using the Modal directive instead. It has a similar problem where the page fades (rather than goes completely black) and the popup also doesn't appear.

edsioufi
  • 8,297
  • 3
  • 36
  • 42
KEB
  • 261
  • 1
  • 3
  • 8
  • could you make a http://jsfiddle.com or a http://plnkr.co of your issue? – David Chase Aug 12 '13 at 21:39
  • possible duplicate of [Bootstrap 3 with AngularJS](http://stackoverflow.com/questions/16327846/bootstrap-3-with-angularjs) and possible duplicate of http://stackoverflow.com/questions/18205329/does-angularui-bootstrap-support-twitter-bootstrap-3 – Bass Jobsen Aug 14 '13 at 20:08
  • @KEB why not mark an answer if you found any of them useful? Cheers – superjos Dec 09 '13 at 22:28

3 Answers3

14

As the other answers have stated, this is due to breaking changes in Bootstrap 3. Until the Angular UI team have fixed these issues (currently under development, see the bootstrap3_bis branch) there is a css workaround just for dialog boxes detailed in this blog post:

.modal { display: block; }

Working plunkr is available here:

http://plnkr.co/edit/nZT58YNKT84UlSwTvfpc?p=preview

embee
  • 1,007
  • 7
  • 15
  • 1
    Thanks, I added .modal { display: block; height: 0; overflow: visible; } And that is helping get around at least one problem :) – JoshGough Sep 10 '13 at 12:27
  • Thanks. The linked plunkr example doesn't work for version 0.6 (it does work for version 0.5). I get an 'Unknown provider: $dialogProvider <- $dialog' error. Any idea on how to fix this? – Alan Klement Sep 27 '13 at 18:40
  • 1
    @AlanKlement $dialog is no more, using Modal now, use it by including 'ui.bootstrap.modal' and use the $modal service. The angular bootstrap project page is updated with how to use it. There are API changes too, so don't just find/replace :) – Mutahhir Oct 01 '13 at 13:16
  • @ Mutahhir thanks. Do you have a link? I'm looking now, but just want to make sure I'm looking at the right thing. – Alan Klement Oct 01 '13 at 16:42
  • @Mutahhir Actually, I can't find anything your talking about. All I can find are discussions about how $modal is being rewritten. Perhaps it's in some branch somewhere.... I can't figure it out. – Alan Klement Oct 01 '13 at 17:43
  • @AlanKlement It's right there on the main page now: http://angular-ui.github.io/bootstrap/#/modal – Mutahhir Oct 02 '13 at 04:16
  • There is a separate branch with updated templates ... https://github.com/angular-ui/bootstrap/tree/bootstrap3_bis2 – CalM Oct 10 '13 at 11:57
2

There's a pull request pending that contains fixes for most of the issues with Bootstrap 3.0 and the AngularUi directives, including the issues with the dialogs (which were certainly the most frustrating ones for me!):

https://github.com/angular-ui/bootstrap/pull/742

(See Bootstrap 3 compatible with current AngularJS bootstrap directives?)

Community
  • 1
  • 1
Jonathan Moffatt
  • 13,309
  • 8
  • 51
  • 49
-3

The example code you use works with Twitter Bootstrap 2.3.2. Why do you expect it should work with version 3 of Twitter's Bootstrap 3 too? Twitter's Bootstrap 3 is not backwards compatible with Twitter's Bootstrap 2.x. You will have to change / migrate your HTML. Cause you're using Angular JS, you will have to migrate your templates. Most of the works seems ready at the moment, see: https://github.com/angular-ui/bootstrap/pull/742. http://www.bootply.com/bootstrap-3-migration-guide will give you a impression of the changes you will have to make.

Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224