I love this library. I'd like to use it to display a moderate response table on one of my web pages, but the text gets a little wide. I was hoping there was an option to change the width of the overall alert for the page that I'm displaying the table within SweetAlert, but I'm not having any luck. Table & HTML look great, just too much info for the modal.
I can't even find where the width is set in the overall sweetalert.css.
I thought maybe the customClass configuation key might help and I tried:
swal({ title: priorityLevel +' Issues for '+appName, html: appHTML, type: "info", customClass: 'swal-wide', showCancelButton: true, showConfirmButton:false });
The css was just a simple:
.swal-wide{ width:850px; }
This didn't do anything. Anyone have an idea of how to do this or perhaps have played around with the width element?
Thank you!
swal("Click on either the button or outside the modal.") This comes in handy if you want to warn the user before they perform a dangerous action. We can make our alert even better by setting some more options: icon can be set to the predefined "warning" to show a nice warning icon.
How do you change the font size on Sweet Alert 2? There are 2 ways to customize the base font-size of SweetAlert2 popup: Plain CSS way. . swal2-popup { font-size: 1.25rem ! important; }
try to put !important
like this in the css:
.swal-wide{ width:850px !important; }
See it working in the snippet.
function TestSweetAlert(){ swal({ title: 1 +' Issues for test', text: "A custom <span style='color:red;'>html</span> message.", html: true, type: "info", customClass: 'swal-wide', showCancelButton: true, showConfirmButton:false }); }; $('#testeSWAL').on("click",TestSweetAlert);
.swal-wide{ width:850px !important; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet"/> <button id="testeSWAL"> Test SWAL </button>
Note: maybe you will have problems with the position.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With