SweetAlert2: Set dialog height

Question

for sweetAlert2 I noticed there's no "height" property but there is a "width" property, is there a way to set the height of the dialog to be 80%?

Thanks

https://limonte.github.io/sweetalert2/

Answer 1

You have to use a custom CSS class like in the snippet below:

const test = () => {
  swal({
     title: 'Test',
     customClass: 'swal-height'
  });

};

.swal-height {
  height: 80vh;
}

<script src="https://unpkg.com/[email protected]/dist/sweetalert2.all.js"></script>

<button onclick="test()">test</button>

Answer 2

Since version 7.21.0 a fix is added. You can add the option "heightAuto: false" to your Sweet Alert options and the problem is solved.

Swal.fire({
    heightAuto: false,
    title: 'Hello,
    Text: 'This is an alert'
});

Example here: https://jsfiddle.net/y3nf3fjg/1/