Angular UI Bootstrap Dialog Width

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

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;
    }
}

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.