Angular UI Bootstrap Dialog Width

Question

The Angular UI Bootstrap Dialog is easy to implement, but difficult to customise.

How on earth do you change the width? Or even max-width?

http://angular-ui.gith

Answer 1

Here's how I add another class to the modal dialog in angular using the $dialog service:

var opts = {
    backdrop: true,
    keyboard: true,
    backdropClick: true,
    templateUrl: 'my-partial.html',
    controller: 'MyPartiallController',
    dialogClass: 'modal myWindow'
};
var d = $dialog.dialog(opts);
d.open();

The dialog will open with class="modal myWindow" - note you have to include 'modal' or the dialog contents will appear underneath the backdrop.

Then with this css you can change the width:

.modal.myWindow {
    width:700px;
    margin-left:-350px
}

You'll have to include the negative left margin of 1/2 the width or it will be off-center.