Ionic-framework: *ngFor on ion-item or div deactivates y-axis scroll in ion-segment or any tab component

[jamesharvey2]

Hello, I found a big issue when using ion-segment.

I'm populating a page of ion-segment with ion-items which is getting item data from data provider.
The issue is when items are populated from data provider, it looks like it automatically deactivates y-axis scroll. This only happens when I do this within ion-segment's page.
Is there any way to fix this problem? This is apparently a bug in Ion-segment.

<div ngSwitchCase="'segmentPage04'">
 <div  *ngFor="let item of items">  

                                     <ion-item>
                                       <button tappable  (click)="navigate()" id="item-button">

                                        <h4><strong>{{item.title}}</strong></h4>
                                        <p>{{item.description}} </p> 


                                        </button>

                                      </ion-item>

                              </div>

</div>

[jamesharvey2]

The same issue was found here:

https://forum.ionicframework.com/t/scroll-in-segment-with-list-of-cards-not-working/66543

It looks like this is a bug that needs to be fixed ASAP.

[wbhob]

Anything in the console?

[jamesharvey2]

Nope. It's easy to replicate this error. Make ion-segment divs. And create a data provider and make 12 items. Then try to populate ion-segment's div using *ngFor loop with the items from data provider. You will see ion-segment automatically deactivating y axis scroll..

[Nitingadhiya]

do you try "ion-list" instead of "div"?

[wbhob]

Yeah, like @Nitingadhiya said, your code is a little bizarre. That's not an ion-segment, that's an ion-list without the list.

[jamesharvey2]

Yes, I have tried ion-list and ion-item. The reason I'm using div in example is because ion-item didn't work and I wanted to try normal html5 component.

This error can be easily replicated. Any looped items from data provider will deactivate y-axis scroll in ion-segment.

<ion-list> 

   <ion-item *ngFor="let item of items"> 
    <h1>{{ item.name }}</h1>
     <p> {{ item.description }} </p>
  </ion-item>

</ion-list>

will give you exactly the same bug. This is a bug.. I tried many different options.. and this happens only within ion-segment.

[jamesharvey2]

This bug happens on regular tab menu as well... if *ngFor loop is nested within any tab component, it will cause this error. y-scroll gets deactivated.

It needs to be fixed ASAP

[jamesharvey2]

Problem is solved by using ion-view instead of ion-item and then adding overflow-y: scroll to the main div container. This is not a usual way to work around this problem.. but it's working.
Ion-item has a bug apparently... I'll be using ion-view until Ionic team fixes this problem.

I thought this was a problem caused by angular search engine... so was looking to moving to Elastic search. but this is an apparent problem from Ionic framework UI.
When ion-item is nested within any tab component & used with *ngFor directive, it will permanently deactivate y-axis scroll.. and simply there's no way to fix it no matter how many 'overflow-y: scroll !important' css styles you add to its container div.

This must be fixed in ionic 4. I'm looping ion-view to make this thing work but it's not the way it should work. It took me 10+ hours to work on this problem today and yesterday. I'm surprised only one other person has reported this problem so far.

[ionitron-bot[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/331