Want Search Results to Overlay Content


#1

I am using Ionic and Angular to create a grocery list app. The design I was given calls for a searchbar with results to display after a button is clicked. These results are another list that is directly underneath the searchbar and overlays the content of the page.

Mockups

Before clicking button to show search

Desired look after clicking button to show search

So far, this is the code:

<ion-content padding>
  <ion-grid>
    <ion-row>
      <ion-searchbar *ngIf="isOn" (keydown)="search($event)"></ion-searchbar>
      <ion-list>
        <ion-item id="searchitem" *ngFor="let searchresult of searchresults" (click)="selectresult(result)">
          {{ result.$value }}
        </ion-item>
      </ion-list>
      <ion-col>
      </ion-col>
      <ion-col>
      </ion-col>
      <ion-col>
        <ion-buttons end>
          <button *ngIf="!isOn" (click)="showsearch()" ion-button small color="nudgetprim" end>
            + Add Item
          </button>
        </ion-buttons>
      </ion-col>
    </ion-row>
  </ion-grid>

  <ion-item-group>
    <ion-item-divider color="light">Items</ion-item-divider>
    <ion-item *ngFor="let item of items | async" (click)="changestate(item)">{{item.$value}}</ion-item>
  </ion-item-group>

</ion-content>

Right now, the searchbar is displaying properly after the button is clicked and the results are showing up under the search bar. I just need to find a way to have the listed results overlaying the previously displayed contents. How do I achieve this look in Ionic?