Typeahead not overlapsing the side menu

ionic-v1
1

I’m trying to create a typeahead search field that either extends the ion-item or over lapses the current ion-side-menu but it’s not working. I’ve tried with different Z-index and everything. This is how it looks:

If I take away the developer toolkit you can see a small border so that it does exist.

<ion-side-menu side="left">
<header class="bar bar-header bar-stable">
  <h1 class="title">Dashboard</h1>
</header>
<ion-content class="has-header">
  <ion-list>
    <ion-item>
      <label class="item item-input">
        <i class="icon ion-search placeholder-icon"></i>
        <input type="text" placeholder="Search" style="z-index:10000;" ng-model="selected" typeahead="event.name for event in events | filter:$viewValue | limitTo:5">
      </label>
    </ion-item>
2

Could anyone help me?

3

Hey there, any chance you could put this into a codepen? I can take a look at it there

5

If you write something inside the search box you can just barely see the div with the typeahead search results

6

Ahh, it’s using ui-bootstrap.

Hmm, you’d probably have to make changes to the directive template.
But there is this directive.

It’s setup to use google places, but it can be reworked to be a more generic search/typeahead

8

This can be closed.

I have fixed this by removing overflow:hidden on the ion items
I also put z-iindex initial on the search box and z-indexed the ion items in the negative