Display is not correct with bootstrap3 branch of angular-ui about angular-dialog-service

[m-e-conroy]

I wrote this against the non-bootstrap3 AngularUI branch, although I have used it with Bootstrap 3 itself and works "fine" while using AngularUI 0.6.0 or below, there was one glitch and I fixed it with the included CSS. You can see the demo of this here: http://codepen.io/m-e-conroy/pen/AmBpL using Angular 1.2, AngularUI 0.6.0 and Bootstrap 3.

That being said, I will add this to the todo list, thanks for pointing this out.

[lnu]

Thanks for the feedback.

I did a plunk to show you:http://plnkr.co/edit/9S9cNuzbvh7CkFvSRhDi
you can switch between the main and the bootstrap3 version of angular-ui.

[oaugustus]

Hi, I have Angular UI 0.9.0 and the problem still keep happening. Have you found another solution?

[lnu]

You can change the template to make it work:

angular.module('dialogs', ['dialogs.services', 'ngSanitize']) // requires angular-sanitize.min.js (ngSanitize) //code.angularjs.org/1.2.1/angular-sanitize.min.js

    // Add default templates via $templateCache
    .run(['$templateCache', function ($templateCache) {
        $templateCache.put('/dialogs/error.html', '<div class="modal-header dialog-header-error"><button type="button" class="close" ng-click="close()">&times;</button><h4 class="modal-title text-danger"><span class="glyphicon glyphicon-warning-sign"></span> Error</h4></div><div class="modal-body text-danger" ng-bind-html="msg"></div><div class="modal-footer"><button type="button" class="btn btn-primary" ng-click="close()">Close</button></div>');
        $templateCache.put('/dialogs/wait.html', '<div class="modal-header dialog-header-wait"><h4 class="modal-title"><span class="glyphicon glyphicon-time"></span> Please Wait</h4></div><div class="modal-body"><p ng-bind-html="msg"></p><div class="progress progress-striped active"><div class="progress-bar progress-bar-info" ng-style="getProgress()"></div><span class="sr-only">{{progress}}% Complete</span></div></div>');
        $templateCache.put('/dialogs/notify.html', '<div class="modal-header dialog-header-notify"><button type="button" class="close" ng-click="close()" class="pull-right">&times;</button><h4 class="modal-title text-info"><span class="glyphicon glyphicon-info-sign"></span> {{header}}</h4></div><div class="modal-body text-info" ng-bind-html="msg"></div><div class="modal-footer"><button type="button" class="btn btn-primary" ng-click="close()">OK</button></div>');
        $templateCache.put('/dialogs/confirm.html', '<div class="modal-header dialog-header-confirm"><button type="button" class="close" ng-click="no()">&times;</button><h4 class="modal-title"><span class="glyphicon glyphicon-check"></span> {{header}}</h4></div><div class="modal-body" ng-bind-html="msg"></div><div class="modal-footer"><button type="button" class="btn btn-default" ng-click="yes()">Yes</button><button type="button" class="btn btn-primary" ng-click="no()">No</button></div>');
    }]); // end run / dialogs

It works for me with the latest version of angular-ui (0.10)

[m-e-conroy]

Removed the .modal class to correct the display problem, and created v3.0 which relies on angular-ui-bootstrap 0.10.0 which seemed to fix this problem.