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

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 (cordova-lib@9.0.1)
   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)

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 15 (1 by maintainers)

Most upvoted comments

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>

MoAsmar on Nov 17, 2019

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:

JamesSlater on Aug 27, 2019

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>

<ion-toolbar> solves the problem

utsavmalla on Jan 7, 2020

solved with 4.5.0 Boron

informatikTirol on Jun 14, 2019

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.

ctfrancia on Aug 28, 2019