Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

showLoaderOnConfirm issues when used with customClass

See original GitHub issue

When the options are

showloaderonconfirm: true,
 customclass: {
  confirmbutton: "swal-confirm-button-anyColor"
}

the loader spins with text displayed inside

Expected behavior

the loader should spin clean

Live demo

live demo: https://jsfiddle.net/dgubav27/1/

Issue Analytics

State:
Created 3 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

limontecommented, Apr 9, 2020

noticed another issue with width: 100% in <my-custom-classes>. Text is not displayed but spinner also get 100% width and spins out of bound

width: 100% and width: 100% !important; are different things 😉

Use width: 100% and you’ll be fine.

1reaction

limontecommented, Apr 9, 2020

The proper fix should be the separation of the loader and the confirm button. That’ll be done in the next major release.

Until then, please use this:

customClass: {
  confirmButton: 'swal2-confirm <your-custom-classes>'
}

and please update your sweetalert2 dependency, I just published a new release (v9.10.10) so the suggested workaround would work.

Top Results From Across the Web

Using sweetalert2 with bootstrap 4 - Stack Overflow

The question is: How can I let the default style for the loader (using bs4)? Or maybe customize the style for the showLoaderOnConfirm...

SweetAlert2 - a beautiful, responsive, customizable and ...

A beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes.

Guides - SweetAlert

If you have a special use case, you can give your modal a custom class. showCancelButton and showConfirmButton are no longer needed. Instead,...

Sweet Alert Padding Issue - JSFiddle - Code Playground

showLoaderOnConfirm &&!t.preConfirm&&r("showLoaderOnConfirm is set to true, but preConfirm is not defined.\nshowLoaderOnConfirm should be used together with ...

Input field unable to edit or made changes in sweet alert

I'll revive this thread because I'm having a similar issue. ... (); in2= $('#input2').val(); console.log(in1,in2) // use user input value freely } },....