20

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.

Nick
  • 6,366
  • 5
  • 43
  • 62

4 Answers4

40

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

Kim Ras
  • 972
  • 8
  • 14
  • Definitely the best solution. Works perfect for dynamic width! – Sorcerer Mar 06 '14 at 16:18
  • In the windowClass property, can it call multiple classes in the css? – jhedm May 08 '14 at 03:09
  • I do not know, but since you have mail class you should be able to address the classes tiy need. In my project I do not have multilevel Classes inside the modal box. it works file with the normal class CSS definitions. – Kim Ras May 10 '14 at 18:02
  • its, working fine with .modal-content instead of .modal-dialog – Krunal Shah Mar 20 '15 at 10:16
7

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;
    }
}
Paulo Scardine
  • 73,447
  • 11
  • 124
  • 153
  • 1
    it is now called `windowClass` and your css rule should be for inner .modal-dialog, so it's like - `.modal-huge .modal-dialog` – SET001 Oct 13 '13 at 09:48
  • @SET: Thanks for the information, tried to update the answer but I lack the time to test it - if you spot some error and feel like doing so, please fix my answer. – Paulo Scardine Oct 13 '13 at 10:09
  • @SET: thanks for the fix, the moderators wrongfully rejected your edit (unfortunately many of them do not bother to read the comments). – Paulo Scardine Oct 13 '13 at 15:30
  • Also please notice space in rule: `.modal-huge .modal-dialog`. windowClass will apply class to main dialog box div, but we need to change width to it's parent `.modal-dialog`. Also there is no need to do `options="{windowClass:'modal-dialog modal-huge'}"`, just `options="{windowClass:'modal-huge'}"` – SET001 Oct 13 '13 at 15:57
6

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

Răzvan Flavius Panda
  • 21,730
  • 17
  • 111
  • 169
charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • 5
    That link is dead. I am sure they have moved it and it isn't your problem but it is driving me nuts because I can't find it. Do you perhaps have a more up-to-date link? – uriDium Aug 27 '13 at 09:39
  • 1
    @uriDium: https://github.com/angular-ui/bootstrap/blob/master/src/modal/docs/readme.md – Răzvan Flavius Panda Feb 14 '14 at 14:53
3

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.

Sammie Edwards
  • 111
  • 1
  • 4