ion-tabs scrolling inside ion-card element, instead of being fixed to bottom (Ionic 4)

Question

PROBLEM :

I have set the slot property for the ion-tab-bar to "bottom", however the ion-tabs seem to position themselves inside an ion-card element and when scrolling through the ion-card content to read more, the tabs scroll with the content.

I have tried using CSS to make the ion-tabs position: fixed, but that stops the content scrolling altogether (Cannot read all of ion-card contents).

Does any one know a fix for this? Any help is appreciated, thanks.

BACKGROUND :

CLIP OF PROBLEM: https://streamable.com/m650o

about.page.html:

<ion-content>


  <ion-card class="aboutcard">
    <ion-img src="assets/pic1.jpg"></ion-img>
    <ion-card-header>
      <ion-card-title>About Us</ion-card-title>
      <ion-card-subtitle>BOUTIQUE SOLICITORS</ion-card-subtitle>
    </ion-card-header>

    <ion-card-content>BOUTIQUE Immigration Lawyers of London have
      ‘years of specialist Legal experience at your disposal’
      <br>
      Established in 1998 as a niche human rights firm – we have a trusted record of excellent service. BOUTIQUE are
      frequently recommended by a long list of happy clients.
      We are passionate about our work and dedicated to achieving life-changing results.
      <br>
      OUR PROMISE
      <br>
      “If you come to BOUTIQUE, you will get the result you want.
      If there is a way, we find it and do it for you.
      If there is no way we tell you, and don’t waste your time.
      Where there is a way, we will deliver.”
      Lawrence Lupin – Founding Director
    </ion-card-content>
  </ion-card>

     <ion-tabs slot="fixed">
      <ion-tab-bar slot="bottom">
        <ion-tab-button class="activeTab">
          <ion-icon name="information-circle-outline"></ion-icon>
          <ion-label>About Us</ion-label>
        </ion-tab-button>
        <ion-tab-button (click)="dashboard()" class="adjustHeight">
          <ion-icon name="home"></ion-icon>
          <ion-label>Dashboard</ion-label>
        </ion-tab-button>
        <ion-tab-button (click)="contact()" class="adjustHeight">
          <ion-icon name="contacts"></ion-icon>
          <ion-label>Contact Us</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>
</ion-content>

Answer 1

Update: Fixed this.

To fix you need to put the ion-tabs outside of the ion-content, and wrap it in an ion-toolbar.

This way the ion-tabs are separate from the content and by wrapping it in to an ion-toolbar you reduce the "click-zone" as ion-tabs "click-zone" takes up the whole page and can lead to other issues such as (click) events not firing.

Best of luck to whoever sees this.