I just migrated an app from Ionic 3 to Ionic 4 and in one part of my app I have have Ionic Segment that displays a tabbed dialog on the page. Each segment displays an ion-list with a bunch of ion-items. In the Ionic 3 version of the app, the following code:
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button size="small" (click)="addDevice()">
<ion-icon name="add"></ion-icon>
</ion-fab-button>
</ion-fab>
Displays the a fab button in the bottom-right corner of the page as expected:
In Ionic 4 (new project created this weekend) it displays at the bottom of the list instead of the bottom of the page.
With this version, the button scrolls off the bottom of the page as you add additional items to the list.
Here’s the full code for the page:
<ion-header>
<ion-toolbar color="primary">
<ion-title>Settings</ion-title>
<ion-buttons slot="end">
<ion-button (click)="save()"> Done </ion-button>
<ion-button (click)="dismiss()"> Cancel </ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-segment [(ngModel)]="selectedSegment" color="primary">
<ion-segment-button value="devices"> Devices </ion-segment-button>
<ion-segment-button value="other"> Other </ion-segment-button>
</ion-segment>
<div [ngSwitch]="selectedSegment">
<!-- Device Tab -->
<ion-list *ngSwitchCase="'devices'">
<ion-list #deviceList>
<ion-list-header>
{{ devices.length ? 'Tap item to edit, swipe to delete': 'No devices found, tap + to add' }}
</ion-list-header>
<ion-item-sliding *ngFor="let device of devices; let i= index">
<ion-item (click)="editDevice(device, i)">
<ion-icon name="settings" slot="start" color="primary"></ion-icon>
<ion-label class="deviceName">{{device.name}}</ion-label>
</ion-item>
<ion-item-options>
<ion-item-option color="danger" expandable (click)="deleteDevice(device, i)">
Delete
<ion-icon slot="icon-only" name="trash"></ion-icon>
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-list>
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button size="small" (click)="addDevice()">
<ion-icon name="add"></ion-icon>
</ion-fab-button>
</ion-fab>
</ion-list>
<!-- Settings Tab -->
<ion-list *ngSwitchCase="'other'" no-padding>
<ion-item no-padding>
<ion-label text-wrap>The app uses your Particle account's Access Token to control Particle device(s) using the
Particle Cloud API. Please enter the token below:</ion-label>
</ion-item>
<ion-item>
<!-- <ion-label floating>Particle Access Token: </ion-label> -->
<ion-input type="text" class="monospace" placeholder="(Access Token)" [(ngModel)]="particleAccessToken">
</ion-input>
</ion-item>
<ion-item lines="none" no-padding>
<ion-label text-wrap>Use the Reset Configuration button to reset the application to its defaut state, deleting
all configuration data.</ion-label>
</ion-item>
<!-- <ion-item> -->
<ion-button color="danger" (click)="clearConfig()" expand="block">Reset Configuration</ion-button>
<!-- </ion-item> -->
</ion-list>
</div>
</ion-content>