SweetAlert - Change Modal Width?
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
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.
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