javascript - Problem with SweetAlert2 and Ionic6 not visualizing correctly - Stack Overflow

admin管理员组

文章数量:1404760

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

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

• javascript
• angular
• ionic-framework
• ionic6

Share Follow edited May 24, 2022 at 14:17 Pablo Ramos Muras asked May 24, 2022 at 11:49 Pablo Ramos MurasPablo Ramos Muras 2344 bronze badges 4

• Please give us a some reproducible example – Shifenis Commented May 24, 2022 at 13:18
• I will make a new github repository with an example, give me some minutes. – Pablo Ramos Muras Commented May 24, 2022 at 13:36
• The reproducible example is added on a github repository – Pablo Ramos Muras Commented May 24, 2022 at 13:47
• In ionic, you have to set the heightAuto to false eg Swal.fire({title:'Title',heightAuto:false}) – Jasper Commented Jul 14, 2022 at 10:33

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

This has been addressed in this issue

Simply use this option with Ionic Framework.

heightAuto: false

本文标签： javascriptProblem with SweetAlert2 and Ionic6 not visualizing correctlyStack Overflow