How can I change the z-index of Notifications and/or Alerts

Anvil Q&A
1

I am using some custom HTML along with anvil forms.

Now I have encountered a situation where my custom HTML has a fixed z-index set higher than notifications.

I am not able to change the z-index of this HTML, how can I manipulate the z-index of Anvil notifications?

2

Erm…you could find the Anvil notifications and add a CSS rule in your HTML to give it a higher z-index. We currently use bootstrap-notify for Notifications, so you can select that element with something like:

[data-notify] { z-index: 9999 !important; }

We don’t guarantee that those attributes of those HTML elements will remain stable, though, so I would strongly recommend customising your custom HTML rather than messing with ours. Is there a particular reason you are unable to reduce the z-index of your own HTML?

3

Hi @meredydd, and thank you for your response.

I am using an API, which sets an iframe at a fixed z-index, I ran into some difficulties when changing the index on the frame, so I am assuming it requires this for some reason.

4

Hey @meredydd,

I’m interested in using your little CSS rule in my own app. It’s not as complicated as what it sounds like ruben’s doing, all I’m aiming for is getting Notifications to pop up on top of alert and confirm windows.

I have a pretty in-depth confirm window that gets a lot of info from a user which it will commit to a table. Currently, if the commit fails the warning Notification comes in behind the confirm window, making it pretty impractical.

By inserting [data-notify] { z-index: 9999 !important; } into theme.css, the Notification works exactly like I want it to, but you mention that these alterations may not remain stable. Might there be a better or more stable way to achieve what I’m after?

Thanks for your help!

5

Hey,

Stacking Notifications and alerts on top of each other is definitely something we’d like to make easier. For now, stick with that CSS rule, and watch the newsletter updates :slight_smile:

1 Like