Ionic-framework: bug: Content Scroll doesn't work with ion-tabs

[ctfrancia]

Bug Report

Ionic version:


[x] 4.x

Current behavior:

After putting in ion-tabs into the project and running on Android the page doesn't scroll

Expected behavior:

to be able to scroll to see overflow

Steps to reproduce:

put in ion-tabs in a project that has to be scrolled horizontally
Related code:

<ion-header no-border>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title text-center> ¡Hola {{ userInfo.firstNames }}! </ion-title>
    <ion-button fill="clear" class="header-right" (click)="showNotifications($event)">
    </ion-button>
  </ion-toolbar>
</ion-header>
<ion-content>
  //stuff here
</ion-content>

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon name="flash"></ion-icon>
      <ion-label>Tab One</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2">
      <ion-icon name="apps"></ion-icon>
      <ion-label>Tab Two</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon name="send"></ion-icon>
      <ion-label>Tab Three</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

Other information:

I've read that this was fixed earlier as well as this Stackoverflow
Also, within my application I initialized the app with the side menu flag. However, there is one section (the home section) that I want to give them quick access to either home or their profile section rather than using the side-menu exclusively

Ionic info:

Ionic:

   Ionic CLI                     : 5.0.1 (/Users/c.francia/.nvm/versions/node/v12.1.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.4.2
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.4.1

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : android 7.1.4, ios 4.5.5
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 8 other plugins)

[informatikTirol]

I have the same problem on IOS. In Chrome and in Safari in MacOs it works.

Content scroll does work when page laoded with [routerLink]="['/programs']
Content scroll does not work when page loaded with [routerLink]="['/tabs/programs']

When i open the tab with the ion-tab-button, then it works..
<ion-tab-button tab="programs" > <ion-icon name="compass"></ion-icon> <ion-label>{{'programs' | translate}}</ion-label> </ion-tab-button>

Ionic Info:

Ionic CLI : 5.0.2 (/Users/aj/.nvm/versions/node/v12.4.0/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.4.2
@angular-devkit/build-angular : 0.13.9
@angular-devkit/schematics : 7.3.9
@angular/cli : 7.3.9
@ionic/angular-toolkit : 1.5.1

Cordova:

Cordova CLI : 9.0.0 ([email protected])
Cordova Platforms : android 7.1.4, ios 5.0.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 7 other plugins)

Utility:

cordova-res : not installed
native-run : 0.2.5

System:

Android SDK Tools : 25.2.3 (/Users/aj/Library/Android/sdk)
ios-deploy : 1.9.4
ios-sim : 8.0.1
NodeJS : v12.4.0 (/Users/aj/.nvm/versions/node/v12.4.0/bin/node)
npm : 6.9.0
OS : macOS Mojave
Xcode : Xcode 10.2.1 Build version 10E1001

[informatikTirol]

solved with 4.5.0 Boron

[ctfrancia]

the screen is still locked with tabs

Ionic:

   Ionic CLI                     : 5.0.2 (/Users/c.francia/.nvm/versions/node/v12.1.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.5.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.4.1

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : android 7.1.4, ios 4.5.5
   Cordova Plugins   : co

component.html

<ion-header no-border>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title text-center> ¡Hola {{ userInfo.firstNames }}! </ion-title>
    <ion-button fill="clear" class="header-right" (click)="showNotifications($event)">
      <img *ngIf="!globalAlert" class="notification" src="assets/home/empty-notification.svg" />
      <img *ngIf="globalAlert" class="notification" src="assets/home/have-notifications.svg" />
    </ion-button>
  </ion-toolbar>
</ion-header>

<ion-content class="view">
  <ion-grid>
    <ion-row class="grey-container profile-container">
      <ion-col size="6">
        <img src="assets/testing-doctors/abhirup-maulik.jpg" alt="La foto del medico" />
      </ion-col>
      <ion-col>
        <ion-row>
          <p>
            <strong>{{ title }} {{ userInfo.lastNames }}, {{ userInfo.firstNames }}</strong>
          </p>
        </ion-row>
        <ion-row class="profile-subtitle">
          {{ userInfo.specialty }}
        </ion-row>
        <ion-row class="profile-subtitle2">
          <ul *ngFor="let hospital of userInfo.myHospitals">
            <li>{{ hospital }}</li>
          </ul>
        </ion-row>
        <ion-row>
          <img src="assets/home/grey-settings-gear.svg" (click)="openSettings()" />
        </ion-row>
      </ion-col>
      <ion-searchbar class="searchbar-icon-color"></ion-searchbar>
    </ion-row>
  </ion-grid>
  <ion-text color="primary" text-center><h4>Quick Contacts</h4></ion-text>
  <ion-chip *ngFor="let d of testingList" color="tertiary" (click)="openDoctorProfile(d)">
    <ion-avatar>
      <img [src]="d.profilePicture" alt="Foto del medico" />
    </ion-avatar>
    <ion-label>{{ d.lastNames }}</ion-label>
  </ion-chip>

  <ion-title>Búsqueda Rápida</ion-title>
  <div class="hospital-container">
    <ul *ngFor="let hospital of userInfo.myHospitals">
      <li>{{ hospital }}</li>
    </ul>
    <img src="/assets/home/clinic.svg" class="hospital-img" alt="clinic" />
  </div>
</ion-content>

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon src="assets/home/home.svg"></ion-icon>
      <ion-label>Inicio</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2">
      <ion-icon name="apps"></ion-icon>
      <ion-label>Tab Two</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon name="send"></ion-icon>
      <ion-label>Tab Three</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

[ctfrancia]

Any updates with this? Still unable to use Tabs, the cli, and framework are updated to the most recent 4.6.2. I can't scroll down to the bottom.

[JamesSlater]

I also have this problem. Did you manage to get it fixed?

[JamesSlater]

Thanks for not replying, was very helpful. If anyone encounters this issue I have resolved it, you can read my solution and explanation on StackOverflow here:

[ctfrancia]

Sorry @JamesSlater I am just arriving back to the office from vacation, and make it an effort to not do anything _work_ related while on vacation with my family. I still have the same issue, but, I found awork around by just placing buttons in the <ion-footer> that would act like tabs.

[slclark]

I have a similar problem. I have a demo here where there are two tabs set up with the same SVG image and buttons to manually pan/scroll using scrollByPoint. You may have to use the zoom in button to get pan/scroll to work at all but the pan/scroll works on the first tab only, but not the second tab. It seems to only work on the initially loaded page when in tabs. I've tried without tabs at all (it works), and tried with the pan/zoom page being another tab page and it doesn't work.

https://stackblitz.com/edit/ionic-v4-tabs-scrolling

[MoAsmar]

Thanks for not replying, was very helpful. If anyone encounters this issue I have resolved it, you can read my solution and explanation on StackOverflow here:

Sorry @JamesSlater I am just arriving back to the office from vacation, and make it an effort to not do anything _work_ related while on vacation with my family. I still have the same issue, but, I found awork around by just placing buttons in the <ion-footer> that would act like tabs.

You have to wrap it with ion-toolbar tag, it works for me, thanks @JamesSlater

<ion-header no-border>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title text-center> ¡Hola {{ userInfo.firstNames }}! </ion-title>
    <ion-button fill="clear" class="header-right" (click)="showNotifications($event)">
    </ion-button>
  </ion-toolbar>
</ion-header>
<ion-content>
  //stuff here
</ion-content>

<!-- \/ -->
<ion-toolbar>
  <ion-tabs>
    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="tab1">
        <ion-icon name="flash"></ion-icon>
        <ion-label>Tab One</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="tab2">
        <ion-icon name="apps"></ion-icon>
        <ion-label>Tab Two</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="tab3">
        <ion-icon name="send"></ion-icon>
        <ion-label>Tab Three</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</ion-toolbar>

[utsavmalla]

Thanks for not replying, was very helpful. If anyone encounters this issue I have resolved it, you can read my solution and explanation on StackOverflow here:

Sorry @JamesSlater I am just arriving back to the office from vacation, and make it an effort to not do anything _work_ related while on vacation with my family. I still have the same issue, but, I found awork around by just placing buttons in the <ion-footer> that would act like tabs.

You have to wrap it with ion-toolbar tag, it works for me, thanks @JamesSlater

<ion-header no-border>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title text-center> ¡Hola {{ userInfo.firstNames }}! </ion-title>
    <ion-button fill="clear" class="header-right" (click)="showNotifications($event)">
    </ion-button>
  </ion-toolbar>
</ion-header>
<ion-content>
  //stuff here
</ion-content>

<!-- \/ -->
<ion-toolbar>
  <ion-tabs>
    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="tab1">
        <ion-icon name="flash"></ion-icon>
        <ion-label>Tab One</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="tab2">
        <ion-icon name="apps"></ion-icon>
        <ion-label>Tab Two</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="tab3">
        <ion-icon name="send"></ion-icon>
        <ion-label>Tab Three</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</ion-toolbar>

solves the problem

[MilotH2]

i am still having this issue, i added ion-toolbar outside ion-content with ion tabs inside it and but the content does not show up at all, please check this:

https://forum.ionicframework.com/t/ionic-4-ios-scrolls-tabs-and-not-content-header-too/181139

https://forum.ionicframework.com/t/ionic-4-ios-scrolls-tabs-and-not-content-header-too/181139

[PaulHolsters]

I have solved this issue by adding:
style="overflow: auto; justify-content: flex-start;"
to the ion-tab-bar element.

[irvv17]

Thanks for not replying, was very helpful. If anyone encounters this issue I have resolved it, you can read my solution and explanation on StackOverflow here:

Sorry @JamesSlater I am just arriving back to the office from vacation, and make it an effort to not do anything _work_ related while on vacation with my family. I still have the same issue, but, I found awork around by just placing buttons in the <ion-footer> that would act like tabs.

You have to wrap it with ion-toolbar tag, it works for me, thanks @JamesSlater

<ion-header no-border>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title text-center> ¡Hola {{ userInfo.firstNames }}! </ion-title>
    <ion-button fill="clear" class="header-right" (click)="showNotifications($event)">
    </ion-button>
  </ion-toolbar>
</ion-header>
<ion-content>
  //stuff here
</ion-content>

<!-- \/ -->
<ion-toolbar>
  <ion-tabs>
    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="tab1">
        <ion-icon name="flash"></ion-icon>
        <ion-label>Tab One</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="tab2">
        <ion-icon name="apps"></ion-icon>
        <ion-label>Tab Two</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="tab3">
        <ion-icon name="send"></ion-icon>
        <ion-label>Tab Three</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</ion-toolbar>

this work for me , but ... is the best solution?

[liamdebeasi]

Thanks for the issue. Is this still an issue with the latest version of Ionic Framework? If so, please provide a repo with the code required to reproduce this issue.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!