i have this multi page slider, with a separate header on each slide page.
the header is two ion-toolbar elements, before the slider ion-content.
if I do NOT use ion-header to wrap the two ion-toolbar elements,
then the scrollable area does not detect the common ion-footer outside the slides,
and the last element in my table is clipped off…
if i DO use ion-header, then the scollable area is managed correctly, BUT, the top of the scroll area is down from the header quite a ways, leaving a ugly gap… also BUT… the header TEXT is no longer centered.
and also the header area itself is very big… space between my two ion-toolbars
i have a push button in the slide page header to handle add a new/edit a selected row. (double click also edits, hold deletes)
with the ion-header (1st or 4 slide pages), others duplicate this model .
<ion-content>
<ion-slides loop="true" id="loopSlider">
<ion-slide class="theroot slide-zoom" width="100%" height="100%">
<ion-header>
<ion-toolbar no-border>
<ion-row>
<ion-col col-1>
<button ion-button small clear icon-only (click)="addeditClicked(1,getselectedRow('viewer'),'viewer',{true:'add',false:'edit'}[getselectedRow('viewer')<0])">
<ion-icon [ios]="getselectedRow('viewer')<0 ? 'ios-add':'ios-search'" [md]="getselectedRow('viewer')<0 ? 'md-add':'md-search'"></ion-icon>
</button>
</ion-col>
<ion-col col-10>Viewers</ion-col>
</ion-row>
</ion-toolbar>
<ion-toolbar >
<ion-row>
<ion-col col-4 class=" center">Name</ion-col>
<ion-col col-3 class=" center">Tags</ion-col>
<ion-col col-2 class=" center">Advance</ion-col>
<ion-col col-1 class=" center">Rate</ion-col>
<ion-col col-2 class=" center">Active</ion-col>
</ion-row>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-row *ngFor="let viewer of data.Viewers;let i=index"
[ngClass]="{true:'selected',false:''}[i == getselectedRow('viewer')]"
(dblTap)="addeditClicked(2,i,'viewer','edit')" nowrap
(press)="deleterow(i,'viewer')"
>
<ion-col col-4 class = "colb center" (click)="setClickedRow(i,'viewer','Name')">{{viewer.Name}}</ion-col>
<ion-col col-3 class="colb center" (click)="setClickedRow(i,'viewer','Tags')">
<ul style="nobull margin-top : 0;margin-bottom : 0;margin-left:0;">
<li *ngFor="let tag of viewer.Tags;let t=index;">{{tagfromID(tag)}}</li>
</ul>
</ion-col>
<ion-col col-2 class = " colb center " (click)="setClickedRow(i,'viewer','Advance')">{{viewer.Advance}} </ion-col>
<ion-col col-1 class = " colb center" (click)="setClickedRow(i,'viewer','RefreshRate')">{{viewer.ImageRefreshRate}}</ion-col>
<ion-col col-2 class = "col colb center" (click)="setClickedRow(i,'viewer','Active')">{{viewer.Active}}</ion-col>
</ion-row>
</ion-content>
</ion-slide>
...
common footer
</ion-slides>
</ion-content>
<ion-footer>
<ion-toolbar >
<ion-buttons left>
<button ion-button (click)="back()">
<ion-icon md="md-arrow-round-back"></ion-icon>Back
</button>
</ion-buttons>
<ion-buttons right>
<button ion-button (click)="next()">Next
<ion-icon md="md-arrow-round-forward"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
</ion-footer>
screen shot with ion-header, ios
screen shot with ion-header, android
without the ion-header
<ion-content>
<ion-slides loop="true" id="loopSlider">
<ion-slide class="theroot slide-zoom" width="100%" height="100%">
<ion-toolbar no-border>
<ion-row>
<ion-col col-1>
<button ion-button small clear icon-only (click)="addeditClicked(1,getselectedRow('viewer'),'viewer',{true:'add',false:'edit'}[getselectedRow('viewer')<0])">
<ion-icon [ios]="getselectedRow('viewer')<0 ? 'ios-add':'ios-search'" [md]="getselectedRow('viewer')<0 ? 'md-add':'md-search'"></ion-icon>
</button>
</ion-col>
<ion-col col-10>Viewers</ion-col>
</ion-row>
</ion-toolbar>
<ion-toolbar >
<ion-row>
<ion-col col-4 class=" center">Name</ion-col>
<ion-col col-3 class=" center">Tags</ion-col>
<ion-col col-2 class=" center">Advance</ion-col>
<ion-col col-1 class=" center">Rate</ion-col>
<ion-col col-2 class=" center">Active</ion-col>
</ion-row>
</ion-toolbar>
<ion-content>
rest is the same
screen shot WITHOUT the ion-header android (while the top is better, the bottom is clipped, same on ios)