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:

   
Hello
   
Hello world!
   

        Cancel
   

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:

   
Hello
   
Hello world!
   

        Cancel
   

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