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?