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!

score 46 · Accepted Answer · answered Dec 30 '15 at 00:50

46

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.

answered Dec 30 '15 at 00:50

Joel R Michaliszen

3,934
1
16
24

1

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. – Watercayman Dec 30 '15 at 03:45
Use `className` instead of `customClass` in Swal 2.0 – shajji Mar 18 '20 at 11:26
for sweetalert2 there is the 'grow' option: https://sweetalert2.github.io/v7.html which allows for 'row', 'column', 'fullscreen', or false (the default). – David Burson Aug 20 '20 at 16:32
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'. – David Burson Aug 20 '20 at 18:32

Pedro Lobito · Answer 2 · 2020-04-20T13:29:48.577

14

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

edited Apr 20 '20 at 13:29

answered Sep 21 '17 at 13:18

Pedro Lobito

75,541
25
200
222

Buksy · Answer 3 · 2017-03-23T07:43:37.973

4

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

edited Mar 23 '17 at 07:43

answered Jul 25 '16 at 11:59

Buksy

9,442
7
55
63

Only issue with this appears to be the way the modal is centered does not get calculated properly. – random_user_name Mar 22 '17 at 23:37

score 3 · Answer 4 · answered Jan 29 '17 at 13:25

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

score 3 · Answer 5 · answered May 14 '19 at 19:06

3

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

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

answered May 14 '19 at 19:06

icynets

151
1
3

score 1 · Answer 6 · answered Feb 12 '19 at 11:25

None of the answers here worked for me. All I had to do was add the width value as an integer (without strings) and remove the 'px' suffix.

swal({
       width: 400,
       html: data,
       showCancelButton: true,
       showConfirmButton:false,
       cancelButtonText: "Close",
});

score 0 · Answer 7 · answered Mar 09 '16 at 19:38

0

The class name for SweetAlert modal is sweet-alert. So, if you want to change its width, the correct CSS code is:

.sweet-alert { 
       width:  850px;   
}

This is working with SweetAlert 1.1.3

answered Mar 09 '16 at 19:38

Lurai

161
2
7

score 0 · Answer 8 · edited Jan 21 '20 at 10:39

0

Tried Everything , none Worked. The Only Thing which worked for me was to add a classname instead of custom class

In your js

swal({
       title : "More Data",
       className: "myClass"
     });

In Your Css

.myClass{
            width:600px;
            height:auto;
        }

edited Jan 21 '20 at 10:39

Sheri

1,242
2
6
21

answered Jan 21 '20 at 10:15

Mohammed Adil

11
1

score 0 · Answer 9 · answered Mar 09 '20 at 16:09

0

Also you can add to the HTML head the Style:

        .swal-modal {
        width: 1000px;
        }

This work for me. Hope this helps

answered Mar 09 '20 at 16:09

Gelberth Amarillo Rojas

399
3
6

score 0 · Answer 10 · answered Oct 21 '20 at 11:24

0

swal({
  title: 'Title',
  type: 'question',
  width: '650px', /*set width container*/
  showCancelButton: true,
  showConfirmButton: true
 });

answered Oct 21 '20 at 11:24

Sakaoduean Thitchaem

1
1

can you share some details? – corn on the cob Oct 21 '20 at 16:58

score 0 · Answer 11 · answered Apr 11 '21 at 19:18

0

If you are using SweetAlert2 available here at https://sweetalert2.github.io/

then for custom width you can use width property of Swal.fire() function like

Swal.fire({
  title: 'Custom width',
  width: 600,
})

answered Apr 11 '21 at 19:18

Umair Ijaz

31
6

SweetAlert - Change Modal Width?

11 Answers11

`width: '800px'`

Linked