Angular UI Bootstrap Dialog Width - angularjs

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.github.com/bootstrap/#/dialog
I've tried $dialog.dialog({width:600}) and other variations but no joy.

Answer 1

For version 0.8/0.9 the layout has changed so you do not specify the modal class, I fiddled a little around with it and found that I you can use a nested CCS definition like this:
.xx-dialog .modal-dialog {
width :90%;
min-width: 800px;
}
And the when you launch the modal dialog specify the windowsStyle like this:
modalInstance = $modal.open({
templateUrl: 'templates/editxxx.html',
controller: EditXXCtrl,
windowClass: 'xx-dialog',
resolve: {
xx_uuid: function () {
return xx_guid;
}
}
});
But be aware that the windowsstyle is for the WHOLE window including the backdrop .
Hope it helps

Answer 2

The default CSS class is modal, use the dialogClass option (or the options attribute if you are using the modal directive) to specify additional CSS classes, for example:
$dialog.dialog({dialogClass: 'modal modal-huge'});
For the modal directive:
<div modal="modalVisible" close="close()"
options="{dialogClass:'modal modal-huge'}">
<div class="modal-header"><h3>Hello</h3></div>
<div class="modal-body">Hello world!</div>
<div class="modal-footer">
<button ng-click="dialogs.escolherModelo=false"
class="cancel btn btn-warning">Cancel</button>
</div>
</div>
If you are messing with the dialog width, in order to have the dialog centered, the CSS rule needs a negative margin-left of half the width:
.modal-huge {
width: 80%;
margin-left: -40%;
}
#media (max-width: 600px) {
.modal-huge {
width: 580px;
margin-left: -290px;
}
}
[UPDATE]
it is now called windowClass and your css rule should be for inner .modal-dialog, so it's like - .modal-huge .modal-dialog – SET
Ouch, seems like nothing is ever settled in the javascript world. This is untested:
$dialog.dialog({windowClass: 'modal-huge'});
For the modal directive:
<div modal="modalVisible" close="close()"
options="{windowClass:'modal-huge'}">
<div class="modal-header"><h3>Hello</h3></div>
<div class="modal-body">Hello world!</div>
<div class="modal-footer">
<button ng-click="dialogs.chooseModel=false"
class="cancel btn btn-warning">Cancel</button>
</div>
</div>
If you are messing with the dialog width, in order to have the dialog centered, the CSS rule needs a negative margin-left of half the width:
.modal-dialog .modal-huge {
width: 80%;
margin-left: -40%;
}
#media (max-width: 600px) {
.modal-dialog .modal-huge {
width: 580px;
margin-left: -290px;
}
}

Answer 3

Inspect a dialog in browser console will see that width is set with css only. Options in docs allow for user defined class names on body and/or on dialog so you can adjust for various types within page
Docs reference: https://github.com/angular-ui/bootstrap/blob/master/src/modal/docs/readme.md

Answer 4

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.