i have a multi page app, in an ion-slides/ion-slide(4 slides)
navigation works great, custom next/back buttons in the footer work great.
this is a data creation/edit tool for another app I wrote.
there is a push button in the navbar title which either opens a dialog to create a new row of this type, or edit a selected row…
on android this all works perfectly…
on ios the same html gets no navbar /title row (and no button) and on one slide I get BOTH the first and last slide title TEXT together, but no button.
this is one html file as I can’t find a way to use a page template in a slide
i tried ion-toolbar to wrap the column headers, but that produced even more weirdness
<ion-content>
<ion-slides loop="true" id="loopSlider">
<ion-slide class="theroot slide-zoom" width="100%" height="100%">
<ion-header>
<ion-navbar no-padding>
<ion-title>
<ion-row>
<ion-col col-1>
<ion-buttons>
<button (click)="addeditClicked(1,getselectedRow('viewer'),'viewer',{true:'add',false:'edit'}[$index == getselectedRow('viewer')])">
<ion-icon [md]="$index==getselectedRow('viewer') ? 'md-add':'md-search'"></ion-icon>
</button>
</ion-buttons>
</ion-col>
<ion-col col-11>Viewers</ion-col>
</ion-row>
</ion-title>
<ion-row> <!-- data column headers -->
<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-navbar>
</ion-header> <!-- end of header -->
<ion-content>
<!-- page1 content -->
</ion-content
<!--- slide 2 -->
<ion-slide class="theroot slide-zoom" width="100%" height="100%">
<ion-header>
<ion-navbar>
<ion-title>
<ion-row>
<ion-col col-1>
<ion-buttons>
<button (click)="addeditClicked(1,getselectedRow('datasource'),'datasource',{true:'add',false:'edit'}[$index == getselectedRow('datatsource')])">
<ion-icon [md]="$index==getselectedRow('datasource') ? 'md-add':'md-search'"></ion-icon>
</button>
</ion-buttons>
</ion-col>
<ion-col col-11>Datasources</ion-col>
</ion-row>
</ion-title>
<ion-row>
<ion-col col-3 class=" center">Name</ion-col>
<ion-col col-2 class=" center">Type</ion-col>
<ion-col col-2 class=" center">Active</ion-col>
<ion-col col-5 class=" center">Root</ion-col>
</ion-row>
</ion-navbar>
</ion-header>
<ion-content>
<!-- page 2 content -->
</ion-content>
etc
<!-- end of slides and content, footer next -->
</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>