Bootstrap and bootbox: dynamically change the width of confirmation window

Question

I am using Bootstrap for a web application and using bootbox (http://bootboxjs.com) for showing a window before proceeding with a delete operation.

For different delete options, I need to display different messages. I would like to show confirmation windows with different widths.

How can I do this dynamically in javascript code? I looked at everything and am unable to find a solution.

Thanks for any ideas and suggestions!

Cheers.

Answer 1

It is possible to add custom classes to bootbox windows with 'bootbox.classes'. I think you should make some standard CSS classes like small, medium, large and asign a width in CSS.

Then in every bootbox use a line like below (e.g.):

bootbox.classes.add('medium');

According to the the documentation bootbox.classes is a helper method, so it should work. http://bootboxjs.com/documentation.html

It seems to be taken out of the documentation, I have no clue if above method still works.

Below is another implementation to add your own class to a dialog (e.g.):

bootbox.dialog({

  message: "I am a custom dialog",
  animate: true,

  /**
   * @optional String
   * @default: null
   * an additional class to apply to the dialog wrapper
   */
  className: "medium"
  }
});

Answer 2

None of the answers above worked for me so I fiddled around until the following did what I expected (using Bootbox.js v4.2.0)

Javascript:

bootbox.alert("Hello").find("div.modal-dialog").addClass("largeWidth");

CSS:

.largeWidth {
    margin: 0 auto;
    width: 90%;
}

Answer 3

Use jQuery .AddClass chained to the end of bootbox.confirm. My implementation looks like...

$("a#ArchiveBtn").click(function () {
    bootbox.confirm("Archive Location? Cannot be undone", function (result) {
        if (result) {
            $("form#ArchiveForm").submit();
        }

    }).find("div.modal-content").addClass("confirmWidth");
});

CSS...

/* BootBox Extension*/
.confirmWidth {
    width: 350px;
    margin: 0 auto;
}

Answer 4

Just adding to previous answers on jquery'ing bootbox alert.

Consider you would like to use a one-liner rather than relying on a declaration of a css class separately. Just do, for example,

bootbox.alert("Customizing width and height.").find("div.modal-dialog").css({ "width": "100%", "height": "100%" });

Jquery's .css() does the trick so you can get rid of .addClass().

Answer 5

When setting up your box give it a seperate css class

<style>
   .class-with-width { width: 150px !important; }
</style>
<script>
bootbox.dialog("I am a custom dialog", [{
    "label" : "Success!",
    "class" : "class-with-width",
    "callback": function() {
        Example.show("great success");
    }
}]);
<script>

Answer 6

You can use the size property. It adds the relevant Bootstrap modal size class to the dialog wrapper. Valid values are 'large' and 'small'

bootbox.setDefaults({ size: 'small' });

Or you can use the className property. It's an additional class to apply to the dialog wrapper.

bootbox.setDefaults({ className: 'w-100' });

Css

// Example class (a bootstrap v4 utility class)
.w-100 {
    width: 100%;
}

I use setDefaults in these examples but these properties can be used on any bootbox dialog, you will override the defaults this way.

bootbox.alert({ message: 'But without me how can you have mass?', className: 'w-100' })

To preserve the defaults you can chain a jQuery call or even access the actual DOM ;).

bootbox.alert('Whoops!').addClass('w-100');
bootbox.alert('Sorry!')[0].classList.add('w-100');

bootbox.classes isn't supported in versions > 4.4.0

Answer 7

To resize the whole dialog, please, use "div.modal-dialog" instead of "div.modal-content":

.find("div.modal-dialog").addClass("confirmWidth");

The css used is simply e.g.:

.confirmWidth {
  width:350px;
}

Answer 8

Use this- size:"small" or size:"large"