How to have an Ionic >=2 scrollable ion-list under fixed search bar
ion-content
does not have scroll
input property to disable it.
If you need to have searchbar
always visible, I suggest you place it in a toolbar.
<ion-header>
<ion-navbar>
<ion-title>{{ appName }}</ion-title>
</ion-navbar>
<ion-toolbar>
<ion-searchbar></ion-searchbar>
</ion-toolbar>
</ion-header>
Or use ion-scroll
with a fixed height.
<ion-grid>
<!-- Row 2 Scrollable list -->
<ion-row>
<ion-col>
<ion-searchbar></ion-searchbar>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-scroll style="width:100%;height:100vh" scrollY="true">
<ion-list scroll="true">
<ion-item *ngFor="let item of data">
<div>{{item}}</div>
</ion-item>
</ion-list>
</ion-scroll>
</ion-col>
</ion-row>
</ion-grid>
Sample Plunkr
Update: To answer @JohnDoe's comment.. in order to get scroll list to take the height of rest of the screen use Viewport percentage height to set the height of ion-scroll
.