Codex
Codex

Reputation: 1

Ionic tabs not scrolling

so i have an ionic page called tabs and it basically has multiple tabs in it. and one of these tabs is one that has so much content in it that it needs scrolling, the problem is, as you might have guessed, scrolling isn't working and i am not sure why. here's the code:

tabs.page.html:

<ion-content>
  <app-header></app-header>

  <ion-tabs>
    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="home">
        <ion-icon name="home"></ion-icon>
      </ion-tab-button>
      <ion-tab-button tab="posts">
        <ion-icon name="newspaper-outline"></ion-icon>
      </ion-tab-button>
      <ion-tab-button tab="explore">
        <ion-icon name="search"></ion-icon>
      </ion-tab-button>
      <ion-tab-button tab="profile">
        <ion-icon name="person"></ion-icon>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</ion-content>

and here's the code of the home page (only for the sake of example):

home.page.html:

<ion-content>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
</ion-content>

note that i have not added any css to any of the tabs or home page, and the tabs are working fine, I'm just not able to scroll within tabs when content is overflowing. thanks in advance.

Upvotes: 0

Views: 27

Answers (1)

StackOverHoes
StackOverHoes

Reputation: 146

Ion-tabs are not ment to be scrollable. But Ion-segments are https://ionicframework.com/docs/api/segment. Just make sure to set the mode to md and it will look like the ion-tabs.

<ion-segment value="default" mode="md">
 <ion-segment-button value="default">
  <ion-label>Default</ion-label>
 </ion-segment-button>
 <ion-segment-button value="segment">
  <ion-label>Segment</ion-label>
 </ion-segment-button>
</ion-segment>

Upvotes: 0

Related Questions