Bootbox.js making its size a custom value throws dialogue off-center

Question

We are using the popular Bootbox dialogue for Bootstrap 3. We would like to make it a custom size with code such as :

 bootbox.dialog({
        message: $("<div>").load(href, function () {
        }),  //load
        backdrop: true,
        onEscape: false,
        size:'small'
    }).find(".modal-content").css("max-width", "360px");

However, if we do that, the dialogue goes off-center. Is there any way to achieve this?

Many thanks

Answer 1

This isn't any different than manual Bootstrap modals, in that you don't target .modal-content. The width of the dialog is (supposed to be) defined by .modal-dialog, so you have two options;

1) Update your target, like so:

bootbox.dialog({
    message: $("<div>").load(href, function () {
    }),  //load
    backdrop: true,
    onEscape: false,
    size:'small'
}).find(".modal-dialog").css("max-width", "360px");

2) Use the className option, and move your rule to your stylesheet:

bootbox.dialog({
    message: $("<div>").load(href, function () {
    }),  //load
    backdrop: true,
    onEscape: false,
    className:'custom-small'
});

/* your CSS */
.custom-small .modal-dialog {
    max-width: 360px;
}

The className value is applied to the .modal container, so you'd need a descendant selector (as shown) for the width to be applied properly.

Demo jsFiddle

Unless you can guarantee the response is super fast, you probably also want to revamp how you load the dialog's message, given that $.load (or any other AJAX function) is asynchronous:

$.get(href)
    .done(function (response) {
        bootbox.dialog({
            message: response,
            backdrop: true,
            onEscape: false,
            className:'custom-small'
        });
    });