javascript - How to createactivate a vertical scroll bar within a swal (SweetAlert) - Stack Overflow

admin管理员组

文章数量:1405636

I don't know if this is possible, but is there a possibility to activate or create a vertical scroll bar in a swal SweetAlert alert mode?

SweetAlert

The problem is that I am receiving a very large list of errors and exceeds the modal display limit.

    $.ajax({
    url: "/financeiro-gerenciar/remover-financeiro",
    type: "POST",
    data: { ids: selecedtRows },
    traditional: true,
    success: function (result) {
        stopLoadGlobal();

        //Desmarcar o select do header
        $("#dtFinanceiroIndex .selectable-all").prop('checked', false);

        reload_dtFinanceiroIndex();

        if (result.success) {
            swal("Sucesso", result.message + " :)", "success");
            return false;
        }
        else {
            //console.log(result.errors.value.errors)
            if (!result.success) {
                var errosRecebidos = result.message + "\n";

                $.each(result.errors.value.errors, function (key, value) {
                    errosRecebidos = errosRecebidos + '\n' + value

                });
            } 

            swal("Atenção", errosRecebidos + " :(", "error");

            return false;
        }
    },
    error: function () {
        stopLoadGlobal();
        alert("Oops! Algo deu errado.");
        return false;
    }
});  

My SweetAlert

CSS:

.sweet-overlay {
    /*z-index: 100000000000 !important;*/
    z-index: 999999999 !important;
}

.sweet-alert {
    /*z-index: 100000000000 !important;*/
    z-index: 999999999 !important;
}

.sweet-alert .swal-text {
    max-height: 6em; /* To be adjusted as you like */
    overflow-y: scroll;
    width: 100%;
}

I don't know if this is possible, but is there a possibility to activate or create a vertical scroll bar in a swal SweetAlert alert mode?

SweetAlert

The problem is that I am receiving a very large list of errors and exceeds the modal display limit.

    $.ajax({
    url: "/financeiro-gerenciar/remover-financeiro",
    type: "POST",
    data: { ids: selecedtRows },
    traditional: true,
    success: function (result) {
        stopLoadGlobal();

        //Desmarcar o select do header
        $("#dtFinanceiroIndex .selectable-all").prop('checked', false);

        reload_dtFinanceiroIndex();

        if (result.success) {
            swal("Sucesso", result.message + " :)", "success");
            return false;
        }
        else {
            //console.log(result.errors.value.errors)
            if (!result.success) {
                var errosRecebidos = result.message + "\n";

                $.each(result.errors.value.errors, function (key, value) {
                    errosRecebidos = errosRecebidos + '\n' + value

                });
            } 

            swal("Atenção", errosRecebidos + " :(", "error");

            return false;
        }
    },
    error: function () {
        stopLoadGlobal();
        alert("Oops! Algo deu errado.");
        return false;
    }
});  

My SweetAlert

CSS:

.sweet-overlay {
    /*z-index: 100000000000 !important;*/
    z-index: 999999999 !important;
}

.sweet-alert {
    /*z-index: 100000000000 !important;*/
    z-index: 999999999 !important;
}

.sweet-alert .swal-text {
    max-height: 6em; /* To be adjusted as you like */
    overflow-y: scroll;
    width: 100%;
}

• javascript
• jquery
• asp-mvc
• sweetalert
• sweetalert2

Share Improve this question Follow edited Dec 5, 2020 at 20:25 rj- asked Dec 5, 2020 at 12:04 rj-rj- 2311 silver badge88 bronze badges 2

• Can you show more code? – react_or_angluar Commented Dec 5, 2020 at 12:31
• Yes. I updated the post with the Ajax request. – rj- Commented Dec 5, 2020 at 17:10

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

From the swal documentation, you can customise the theming... To have a scroll bar in the swall body, I would use the swal-text class and define a max-height and overflow-y:scroll to it..

// simulating the Ajax result here...
let errosRecebidos = ""

// supposing you have 324 errors lol!
for(i=0;i<324;i++){
  errosRecebidos += "Error #"+i+"\n"
}

swal("Atenção", errosRecebidos + " :(", "error")

.swal-text{
  max-height: 6em;  /* To be adjusted as you like */
  overflow-y: scroll;
  width: 100%;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>

EDIT using SweetAlert for Bootstrap, the idea is the same, but the class name is different. Here, instead of .swal-text, it's .sweet-alert and the "message" container (aside the title and buttons) is a p.

// simulating the Ajax result here...
let errosRecebidos = ""

// supposing you have 324 errors lol!
for(i=0;i<324;i++){
  errosRecebidos += "Error #"+i+"\n"
}

swal("Atenção", errosRecebidos + " :(", "error")

.sweet-alert p{
  max-height: 6em;  /* To be adjusted as you like */
  overflow-y: scroll;
  width: 100%;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.css">

本文标签： javascriptHow to createactivate a vertical scroll bar within a swal (SweetAlert)Stack Overflow