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 63 · Accepted Answer · answered Dec 30 '15 at 00:50

63

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

4,164
1
21
28

2

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
1

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
1

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 · 2023-01-04T15:48:27.073

28

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 Jan 04 '23 at 15:48

answered Sep 21 '17 at 13:18

Pedro Lobito

94,083
31
258
268

what if the screen width is only 500px? what would happen? – Jacky Supit Dec 07 '22 at 09:09
You may want to check the size of the screen first and adjust accordingly. – Pedro Lobito Dec 07 '22 at 11:43
so more job to do, all right. – Jacky Supit Dec 07 '22 at 12:49
1

much better if you use percentage width: '80%' – wakawakapogsSr Jan 14 '23 at 03:20

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

7

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

11,571
9
62
69

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 6 · 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

337
2
5

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

3

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

191
1
7

score 2 · Answer 7 · 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 1 · Answer 8 · edited Jan 21 '20 at 10:39

1

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,383
3
10
26

answered Jan 21 '20 at 10:15

Mohammed Adil

21
2

score 1 · Answer 9 · answered Feb 22 '22 at 21:38

While most answers here work but wanted to add my two cents. (for: Sweetalert2)

We should NOT use a fix size say width: 500/600/800 because it may look ugly on smaller devices. I would rather suggest using the percentage so that no matter which device screen size you use it on, it will behave consistently.

Say we want to display a pop up which should not be more than 40% of the screen size then we can use it like below:

Swal.fire({
  title: 'Consistent width',
  width: '40%',
})

and if we use the same convention in all our pop-ups across the project, we will see consistent Sweet alerts.

score 0 · Answer 10 · 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

171
2
7

score 0 · Answer 11 · 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

619
6
7

score 0 · Answer 12 · 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
2

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

score 0 · Answer 13 · answered Jun 13 '21 at 14:09

0

not the answer, but I hope i helps someone. in my case modal was appearing small due to my theming styles. so adding this fixed mine to default size.

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

answered Jun 13 '21 at 14:09

Ali Aref

1,893
12
31

score 0 · Answer 14 · answered Nov 25 '21 at 09:43

None of this worked for me. "sweetalert2": "^11.2.0"

Tried custom class
direct width property (worked but needed maxwidth that wasn't available)
Also classname doesn't works for me

Finally had to use the dev tools, inspect the elements and provide necessary changes to the classes. Here are some changes for the recent alert box.

.swal2-popup {
  max-height: 300px !important;
  max-width: 300px !important;
}
.swal2-icon {
  font-size: 13px !important;
}

.swal2-text {
  max-height: 70px;
}

.swal2-confirm {
  background: #3aa9a9 !important;
}

Open in new tab if it doesn't works

SweetAlert - Change Modal Width?

14 Answers14

`width: '800px'`

Linked