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

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 2

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.

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

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