Error displaying an Alert on a Modal

Ionic Framework ionic-v3
1

Hey guys,

I got a little problem on showing an Alert (with CheckBoxes) in a Modal. When I call present on the Alert the first time, the Alert is behind my actual Modal. If i call present a second time, a second Instance of the Alert is displayed on the actual Modal. With the second Alert everything i want to do works fine like it should but when i dismiss that Modal the first Instance of the Alert ist still there on the Modal on which i did not presented it.

the displayed Strukture looks something like this:

  1. Modal 1
    1.1 Alert first Instance
    1.2. Modal 2
    1.2.Alert second Instance

As you can see I’m using a Modal in a Modal. I don’t know if this is good practise or this could cause the problem with my Alert. I’m displaying the first Modal after selecting an object from a List to edit it and the second modal is displayed to add subObjects to that object.
I’m pretty new to Ionic so please be patient with me :slight_smile:

If you need any code or more info just call for it and i will pass it to you!

Every Help with this problem or better practise alternative would be great! :slight_smile:

PS: I’m using Version 2.0.0-rc.2

1 Like
4

Sorry, I posted before I really understood my problem. I think I’m having a similar problem, but it only occurs once in my app.

So in my app, I have a menu component that displays alerts (‘Do You Want To Log Out’) - that sort of thing.

I create these alerts from within the modal component, so it should always be in front of the modal. But this doesn’t seem to be the case. Alerts generated in the modal component sometimes appear behind the modal component, but in front of the current view page.

But it’s a weird problem.

On the first page, if I ask to log out - there’s no problem - The Alert is generated inside the modal component, so it appears in front of my modal.

If I navigate to another page, open the modal, then do something that generates an alert, the alert appears behind the modal.

If I navigate to another page - the problem disappears, and for the rest of the app session, the alert always appears in front of the modal as it should.

I only noticed this problem after upgrading to rc2, but perhaps it has been around for longer.

As for why this happens - it looks to me like the first modal I create has a z-index of 9999 - equal to the z-index of my alert. The 2nd modal has a z-index of 10000 for some reason - so it shows in front of the alert. Subsequent modals have a z-index of 9999 - why would one modal have a z-index higher than an alert that’s created within it?

This is my issue exactly - the alert is going off of a different z-index order: https://github.com/driftyco/ionic/issues/9158

They say the issue should be fixed in the next release.

2 Likes
5

Thank you for that info @brown14!

After you mentioned the problem with Z-Index i checked my Application and its exactly the same Problem. The First Alert with Z:9999 ist behind the second Modal with Z:10000 and after calling Alert a second time the second one is displayed with Z:10000 and shown before the Modal. So looks exactly like that Issue.

I will try to work arround a few Alerts to avoid the display Issue.
Is there allready a release date for rc3 or whatever contains a fix for this?

1 Like
6

No release date, but RC 3 is about 75% done.

I played around with setting my own z-index in the alert.scss in ionic/angular module that’s higher than the modal’s z-index. But it was not working properly. I don’t understand what they are doing well enough to make a good work around.

1 Like
7

Seems like we need to wait for the next release to fix this.

But anyway thank you for your reply on my question! :slight_smile:

8

Also happening to me.
Anyone knows a workaround for this issue?

9

@nukkerone I used a selection dialog or rather tryed to use one to select User/s.
A workaround for this, I used a Modal with a ion-list and Checkboxes instead.

But a workaround for Alerts is still missing…
And as @brown14 said its hard to make a good workaround for an Alert…

10

It’s not only for Alert, Toast has the same issue. Somehow RC3 released did not fix it…

11

I’m having the same issue. Would like to know of a fix if anyone has one.

12

As a temporary fix until they release an official fix I added this to the app.scss file and it works fine.

ion-alert {
  z-index: 99999 !important;
}
2 Likes
13

@stevenhastie Thank your for that fix. Works great!

14

@stevenhastie, thanks for the solution. For subsequent users, you could add ion-action-sheet for displaying action sheet property.