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

Published

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>

Source: Angular Questions

Published
Categorized as angular, html, ionic-framework, javascript, tabs Tagged , , , ,

Answers

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq