Second alert design issue in device ionic-v4

#1

i have added 2 alerts in a page. when i click on first alert then it shows ok but after that when i click second alert then design messed and vice versa. and problem is when i use mode “ios” in first alert and mode “md” in second alert.

first alert:

second alert:

#2

without the code difficult to answer…

#3

also why is this question tagged as ionic-native?

#4

i saw that exact problem is design conflict of mode “md” and mode “ios”. when first one injected then second design not working and vice versa. so we cant use both mode in a page.

btw why in this forum there is no ionic-v4 category?

#5

well without code I can’t help, sorry. I hope someone could

ionic category = v4

1 Like
#6
  async presentAlertConfirm2() {
   
    const alert = await this.alertController.create({
      header: 'Info',
      mode: 'md',
      message: '<div style="overflow-y:auto;max-height:240px;text-align:left;">'+content+'</div>',
      buttons: [
        {
          text: 'Close',
          role: 'cancel',
          cssClass: 'secondary',
          handler: (blah) => {
            console.log('Confirm Cancel: blah');
          }
        }
      ]
    });
    await alert.present();
  }

and first one

  async presentAlertConfirm(u) {
    const alert = await this.alertController.create({
      header: 'Are you sure!',
      message: '',
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          cssClass: 'secondary',
          handler: () => {
          }
        }, {
          text: 'Yes',
          handler: () => {
          }
        }
      ]
    });
    await alert.present();
  }
#7

Maybe it’s breaking because you inject html in the alert? would you give a try using a popover to do so instead of that?

#8

yep i will try that too. i injected html because i want scrollbar. but its working fine when i keep mode same in both alerts. like “md” for both or “ios” for both.

#9

Don’t. Use a modal or a popover if you need html.

1 Like
#10

yes i can use modal but i was playing around this. btw for scrollbar issue created this topic: