Fab position incorrect in ngSwitch segment

Ionic Framework
1

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:

ionic-fab-3
ionic-fab-3.png482Ă—962 24.5 KB

In Ionic 4 (new project created this weekend) it displays at the bottom of the list instead of the bottom of the page.

ionic-fab-4

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>
2

It’s because the ion-fab is a child element of the ion-list.
Try moving it the ion-fab just after the ion-content (essentially making the ion-fab a child of ion-content) and then add a condition to be shown if the selectedSegment is equal to devices

disclaimer: this is untested,

<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-fab *ngIf="selectedSegment === devices" 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-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-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>
1 Like
3

yep, that was it. Thanks!!

1 Like
4

Glad I could help, can you mark this as the solution so it can help others in the Ionic community who may find themselves with a similar problem

5

Ca marche aussi pour moi merci beaucoup

6

vous ĂŞtes les bienvenus