Ionic 2 ion-list is not scrolling in a tab


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.



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

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

The page that I embed in a tab layout is:

<ion-content padding>
  <ion-list no-lines>
        *ngFor="let item of aReallyLongListOfItems">

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

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

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

  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”.

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

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.

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

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

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

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

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.