SweetAlert - Change Modal Width?

Question

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!

Solution 1

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.

Solution 2

On the most recent versions you can use:

width: '800px'

i.e.:

swal({
    title: "Some Title",
    html: "<b>Your HTML</b>",
    width: '800px'
})

---

Sweet Alert2 Docs

Solution 3

Rather than overwriting default .sweet-alert css class you can define your own

.sweet-alert.sweetalert-lg { width: 600px; }

Than simply use sweetalert options to set your class only to those alerts you want to be wide:

swal({
  title: "test",
  text: "Am I wide?",
  customClass: 'sweetalert-lg'
});

PS (update): You may need to change sweetalert class a little to center it properly:

.sweet-alert { margin: auto; transform: translateX(-50%); }

Here is jsbin to try it out

Solution 4

Better use SweetAlert2 which is a successor of SweetAlert. Just add "width" property, like:

swal({
   title: priorityLevel +' Issues for '+appName,
   html: appHTML,
   type: "info",
   customClass: 'swal-wide',
   showCancelButton: true,
   showConfirmButton:false,
   width: '850px'
});

Solution 5

A simple solution is to add the below CSS. reference: Sweet alert 2 modal shows too small

.swal2-popup { font-size: 1.6rem !important; }

View more solutions

Comments

[Watercayman]

Many thanks @Joel Ramos Michaliszen. This didn't work for me, but it got me to the answer - my version of SWAL is not the 'real' one - LOL the sweetalert2 doesn't actually have the Customclass function i don't think -so it won't work. I think we were both right in our attempts for the real SWAL, so I'm going to mark the answer as correct. I think I'm going to use plain ol Bootstrap modals for the tables anyway as they are a little better suited. Thanks again.

[random_user_name]

Only issue with this appears to be the way the modal is centered does not get calculated properly.

[shajji]

Use className instead of customClass in Swal 2.0

[David Burson]

for sweetalert2 there is the 'grow' option: sweetalert2.github.io/v7.html which allows for 'row', 'column', 'fullscreen', or false (the default).

[David Burson]

clarification: there are two different packages: sweetalert and sweetalert2. sweetalert is now on version 2, and for that, use className instead of customClass. For sweetalert2, you can use 'width' or 'grow'.

[corn on the cob]

can you share some details?