How do I put an ion-content on top of an ion-navbar?


#1

I’m trying to implement a popup window in my app. Here is the basic structure of my html:

<ion-header>
  <ion-navbar>
    <ion-title>{{title}}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <...>
</ion-content>


<ion-content class = "popup" [hidden] = "isPopupHidden" >
    <...>
</ion-content>

So you see, I have a header with a navbar, an ion-content for the default page content, and the last ion-content is something I want to be on top of everything when isPopupHidden is false. The problem is that my popup section is always underneath the ion-navbar. (Note: testing shows that it displays above ion-header). So I need it to overlap everything, including ion-navbar. I’ve tried messing with z-indexes but that didn’t help. Any thoughts?

Edit: Here is a screenshot of my issue. Notice how the navbar overlaps my popup.


#2

I think it is easier if you use modal.


#3

You could try adding and removing styles from the <ion-header> element.

See: https://github.com/WickyNilliams/headroom.js#how-does-it-work


#4

Thanks, the modal is my backup. I want the popup to hover above the current page with the current page still slightly visible. It doesnt seem like the modal can achieve this


#5

You can use the modal option for backdrop and control it’s transparency, it is in the modal documents too.


#6

Alright thanks, I’ll take a look at it then!