Ion-alert can't be displayed over ion-menu?

Ionic Framework
1

I have to display an alert with two buttons over ion-menu. Problem is, the alert and the backdrop is displayed behind the side menu. I’ve tried experimenting with z-index in CSS but had no success.
Look at the pics below:

1
1411×836 181 KB
2
2419×836 165 KB

After I press the delete button I present the alert. However, you can see it only displays behind the menu. Any ideas what I’m doing wrong?

My solution for now is to close the menu before presenting the alert, and opening it back after closing the alert.

2

Hey, Manage the alert with custom css, Give Z-index to alert box. So that alert will display over the menu.

3

Which Version of the Ionic Framework are you using?

4

6.12.4

image
image703×110 7.45 KB

5

The Ionic Cli, i mean the Framework Version, found in the package.json

6

Hi, I’m using Ionic 5.6.5. As I said in my initial post, I tried setting a very high z-index on the alert box, but it’s still behind the menu.

7

@cpper if you inspect the Web Code and check and play around with z-index, does that work? if not please share a small reproducable repo

8

No, I was just doing that. I tried to set a low z-index to all elements in ion-menu and a high z-index to all elements in the alert, but still the same result. Maybe I’m not doing it right, though.

Here is the repo: https://github.com/anst270125/ionic-alert-over-menu. It’s the Ionic blank project, with a commit with the minimal changes to reproduce the problem. The attempts to modify the z-index are in global.scss.

9

I don’t have the Permission to Push to your Repository, so i will describe it here:

I was right in my Head, Ionic Overlays work with an increasing z-index for overlays so this works out of the box without adjusting css classes. But your app.component.html File is wrong:

Correct:

<ion-app>
    <ion-split-pane contentId="main">
        <ion-menu side="start" menuId="menu" contentId="main">
            <ion-header>
                <ion-toolbar color="primary">
                    <ion-title>A menu</ion-title>
                </ion-toolbar>
            </ion-header>
            <ion-content>
                <ion-button (click)="showAlert()"> Show alert</ion-button>
            </ion-content>
        </ion-menu>
    </ion-split-pane>
    <ion-router-outlet id="main"></ion-router-outlet>
</ion-app>

Also (maybe this was only because you created fastly a repo) but i would really recommend to stick on eslint and the rules. You can also configure your idea to match them and format your code on every save. It makes the Code cleaner and better to review :blush:

1 Like
10

I’ve just now noticed I have left an additional <ion-app> tag in app.component.html. Removing it didn’t change anything apparently. But I see what I did wrong, the menu should also reside in ion-app.

I have tried the code you provided and apparently it only works if I comment out the ion-split-pane. If I leave it uncommented, nothing happens when I press the menu button(the menu doesn’t open). I’ve committed the changes to the repo (and removed all custom CSS in global.scss).

That being said, without the split pane, the code works exactly how I wanted, so my problem is practically solved. Thanks a lot :slight_smile:

Also, thanks for the formatting advice. I usually do SHIFT+ALT+F (Format Document) in VsCode to format my code. Not sure if this uses the eslint rules though.

1 Like