Ionic and Angular app, bottom tabs are blocking the content and scroll

Question

I have an Ionic and Angular app, and when I add tabs to the bottom of my page (outside the ion-content), the scroll stops working inside the ion-content and the fab button which is inside the ion-content, is covering the tabs.

How can I make this work, I've tried moving it inside the ion-content, which just results in there being a bar of tabs in the middle of my icons that moves with the scroll.

Here is my code:

<ion-content>

  <ion-tabs>
    <ion-tab-bar slot="top" selected-tab="ownedProjects">
      <ion-tab-button tab="ownedProjects">
        <ion-label>Owned</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="subscribers">
        <ion-label>Subscribers</ion-label>
      </ion-tab-button>

    </ion-tab-bar>
  </ion-tabs>,

  <div id="ownedProjectsCardContainer" class="ion-margin-top ion-padding-top" overflow-scroll="true">
    <ion-card *ngFor="let project of user.projects" class="ion-margin-top">
      <img width="100%" [src]="project.projectImage" />
      <ion-card-header>
        <ion-card-subtitle>{{ project.lastUpdated }} - <span class="{{ (project.status).toLowerCase() }}">{{ project.status }}</span></ion-card-subtitle>
        <ion-card-title>{{ project.name }}</ion-card-title>
        <ion-fab vertical="bottom" horizontal="end">
          <ion-fab-button>
            <ion-icon name="pencil-outline"></ion-icon>
          </ion-fab-button>
        </ion-fab>
      </ion-card-header>
    </ion-card>

    <ng-container *ngIf="user.projects.length == 0" [ngTemplateOutlet]="noProjects"></ng-container>
  </div>

  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button>
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>

</ion-content>

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home">
      <ion-icon name="home-outline"></ion-icon>
    </ion-tab-button>

    <ion-tab-button tab="search">
      <ion-icon name="search-outline"></ion-icon>
    </ion-tab-button>

    <ion-tab-button tab="notifications">
      <ion-icon name="notifications-outline"></ion-icon>
      <ion-badge>6</ion-badge>
    </ion-tab-button>

    <ion-tab-button tab="profile">
      <ion-icon name="person-circle-outline"></ion-icon>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

fanwu fanwu · Accepted Answer · 2021-05-07T14:16:33

The best way to use tabs for navigation in your app is creating app with template "tabs"

ionic start appName tabs

you can read more about creating here and about tabs here.

Ionic and Angular app, bottom tabs are blocking the content and scroll

1 Answers