Search code examples
htmlcsstwitter-bootstrap-3bootbox

Bootbox: Message is Overflowing

I'm using the latest version of Bootbox and need to display a very large amount of text. The text is overflowing out of the Bootbox modal window and off the browser. I need the text contained and with a vertical scrollbar when appropriate. I've tried wrapping the message in various html elements, but no luck.

Here's my code:

bootbox.dialog({
    onEscape: function () { },
    message: JSON.stringify(data),
    title: "View",
    buttons: {
        main: {
          label: "Cancel",
          className: "btn-default",
          callback: function () {
             //close popup and do nothing
             return true;
          }
       }
    }
});

Demo

Solution

  • Your JSON data is one long string, which forces the paragraph element to exceed normal width unless you specify word breaks.

    .modal-body p {
    word-wrap: break-word;
}

    Demo

    Longer demo