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

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