Z-index? - can't slidedown another header (with a search input) over <ion-nav-bar>

ionic-v1
1

Hi,

I’m having trouble getting an animated slidedown search box to show up. I have a standard ion-nav-bar at the top of my app, with the default z-index: 10;. When I try to slidedown a ion-header-bar element with a z-index of >10… I still don’t see the ion-header-bar.

Here is the scss of the ion-header-bar:

.ss-filter {
  position: absolute;
  z-index: 99999;
  transition: all .2s linear;
  -webkit-transition: all .2s linear;
}

.slideup {
  transform: translate3d(0,-100%,0);
  -webkit-transform: translate3d(0,-100%,0);
}

.slidedown {
  transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
}

Here is the html for my filter (I even tried an inline style for the z-index. However the ion-nav-bar still covers my slidedown filter.

<ion-nav-bar class="ss-filter slideup"style="z-index: 99999;">
        <label class="item-input-inset item-input-wrapper">
            <i class="icon ion-ios7-search placeholder-icon"></i>
            <input type="search" ng-model="text" placeholder="Filter">
            <button type="button" class="button button-icon icon ion-ios7-close-empty" ng-show="text != ''" ng-click="text = ''"></button>
        </label>
        <button type="button" class="button button-clear" ng-click="showFilter = false">cancel</button>
</ion-nav-bar>

I would like to be able to show/hide my search box without using the ionicNavBarDelegate to manually hide the ion-nav-bar. Ideally, I would just want the search box to gracefully slidedown and cover the ion-nav-bar when needed, and slide back up when ‘cancel’ is pressed.

If any one can help me out I’d really appreciated it!! This is also my first post, so let me know if there are some other details I should’ve included to make my question more succinct.

2

Any chance you could put this into a codepen?

3

sure I’ll give it a shot

4

I found this issue. I had the ion-nav-bar outside of the ion-nav-view element like so:

<ion-nav-bar class="bar-ss" animation="nav-title-slide-ios7"></ion-nav-bar>

<ion-nav-view animation="slide-left-right"></ion-nav-view>

The header with the filter on it was being rendered inside of the ion-nav-view. Which therefore would never be able to cover the ion-nav-bar… doh! Sometimes just asking the question helps to find the answer lol.

Besides my own mistakes, Ionic has been awesome and easy to use!

And thanks for the initial quick reply!

5

@whites1016 I wouldn’t say the way you had it was a “mistake” as that’s how the documentation at http://ionicframework.com/docs/api/directive/ionNavBar/ says you can lay out your header/ nav view.

Just to clarify, are you saying that you couldn’t override the ion-nav-bar z-index when it was outside the ion-nav-view in the index.html, but you could when the ion-nav-bar was inside each individual ion-view?

thanks

6

As far as I can see, yes: I’ve tried the same thing, and been able to position over the nav-bar a component only if the nav-bar itself is defined inside the ion-view.