Ionic 2 ion-list is not scrolling in a tab

Ionic Framework ionic-v3
1

Hi.

I am using a tab layout with a an ion-list. The list is long enough I need to scroll through it, however, when the ion-list is embedded in a tab page, the scroll is not working. There seemed to be some workarounds in ionic1 using an ion-view, but when I try to use ion-view in ionic 2 I get an error saying ion-view is not a known element. When I bring up the page without the tab, the scroll works fine.

Thanks,

Brian

2

Share your code. There is no way of knowing what is happening if you don’t.

3

I doubt it would be as simple but have you tried adding the css element overflow-y: scroll; to the ion-list

4

The page that I embed in a tab layout is:

<ion-content padding>
  <ion-list no-lines>
      <ion-item
        *ngFor="let item of aReallyLongListOfItems">
        {{item.name}}
      </ion-item>
  </ion-list>
</ion-content>

This is used in a tab project in which the tabs page is the root and has the following in the template:

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Tab Title" tabIcon="home"></ion-tab>
</ion-tabs>

The type script file has the following which uses the long list page:

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  // this tells the tabs component which Pages
  // should be each tab's root Page
  tab1Root: any = LongListPage;

  constructor() {
  }
}

I left out code that I would consider “boiler-plate”.

5

Thanks for the suggestion, but this did not work. :frowning:

6

Have you said “the tab” you just have one tab? And if that is correct, it makes me wonder what happens if you have two tabs at least.

Other thing: try to set a height to the list in .scss file or the tag and see what happens.

7

Actually in my application, I have two tabs. This has the same result. The list is stuck and will not scroll.

8

Try this now and let’s see if this works.

9

If I understood your instructions properly, this had no effect. The list is still not scrolling.

10

Well, I don’t know, since you didn’t share your code, again.

11

Thanks for all the help everyone. I did figure out my issue. The problem was the other tab contained a three js implementation that was gobbling up all of the touch events for the entire application not just page the three js panel was on.