bootboxjs / bootbox

Wrappers for JavaScript alert(), confirm() and other flexible dialogs using Twitter's bootstrap framework
http://bootboxjs.com
Other
5.04k stars 1.04k forks source link

Title text swap places with the close button and breaks intended layout #817

Closed csiqueirasilva closed 2 years ago

csiqueirasilva commented 2 years ago

As previously posted on issue #777, I decided to move it here as I could reproduce it with a simple codepen;

"Breaks intended layout" simply means its very different from the examples in Bootbox website.

This might only apply to these specific versions.

Original post below


@tiesont I might have found an issue with the current BS5.2 branch, using the dist/bootbox.all.min.js file.

When using

bootbox.confirm({
    title: "Envio de certificado por e-mail",
    centerVertical: true,
    message: "Você quer mesmo enviar por e-mail?",
    buttons: {
        cancel: {
            label: '<i class="fa fa-times"></i> Cancel'
        },
        confirm: {
            label: '<i class="fa fa-check"></i> Confirm'
        }
    },
    callback: function (result) {
        console.log('This was logged in the callback: ' + result);
    }
});

It generates the following HTML:

image

I fixed it by swapping a "prepend" call to "append" in the dist file. Don't know if it broke anything else.

image

After replacing:

image

Resulted in:

image

Using bootstrap with this CDN:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
tiesont commented 2 years ago

This is an issue with rawgit, not the current state of the v6 branch.

Your fix doesn't really fix the issue - the version of bootbox which rawgit is loading is kinda old and contains a bug that's since been fixed (the version check was written incorrectly).

I will verify that Github has my most recent changes, but either way, v6 doesn't have the bug you're describing.

csiqueirasilva commented 2 years ago

Your fix doesn't really fix the issue - the version of bootbox which rawgit is loading is kinda old and contains a bug that's since been fixed (the version check was written incorrectly).

Alright, thats seems likely.

I will verify that Github has my most recent changes, but either way, v6 doesn't have the bug you're describing.

Ok. I think the issue could be closed as the branch is WIP then.