Search code examples
javascriptangularionic-frameworkionic6

Problem with SweetAlert2 and Ionic6 not visualizing correctly

I have a Ionic Project written on Ionic 5 Angular that has some popups using SweetAlerts2.

Today I decided to update Ionic to Ionic6 and SweetAlerts2 popups doesn't look right. Like the alert is only visible on the header and everything else is blank.

Screenshot of the problem:

Ionic6 Visualization Problem

Code:

swal.fire({
  html:
    '<br><label style="font-size:80%">Example Alert</label>',
  showDenyButton: true,
  confirmButtonText: "Confirm",
  denyButtonText: "Deny",
  denyButtonColor: 'grey',
  confirmButtonColor: 'var(--ion-color-primary)',
})

Repository where the problem is reproduced

Solution

  • This has been addressed in this issue

    Simply use this option with Ionic Framework.

    heightAuto: false