SweetAlert - Change Modal Width?

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 t

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; }