VirtualScroll in Modal with large Items not contained on iOS

[Barryrowe]

Short description of the problem:

When using a virtualScroll in a Modal the content overflows the modal container on iOS when a large number of values are used. Looks fine on desktop with ionicplatform=ios and/or browser user-agent set to iOS.

What behavior are you expecting?

Expecting the scrollbar to act as it does on the desktop when running on iOS. The content should be contained in the modal.

Steps to reproduce:

1. Create a Component with a virtualScroll list (contains the wrapper in the component)
2. Create a "modalpage" component that has an and then just your virtualScroll component from step 1.
3. Display a modal loading the "modalpage" component with a large number of records in the list (testing with 408 items).

/** Facilities Component**/
import {Component, EventEmitter, Output} from "@angular/core";
import {NavController} from "ionic-angular";
import {Facility} from "../models/inspection-model";

@Component({
    selector: "facilities",    
    template: `        
    <ion-content>       
        <ion-list [virtualScroll]="facilities">    
            <ion-item *virtualItem="let facility" class="facility" [class.complete]="facility.isCompleted" (tap)="onFacilitySelected(facility)">
                {{facility.Id}} - {{facility.Type}}
                <ion-icon *ngIf="facility.isCompleted" primary name="checkmark"></ion-icon>            
            </ion-item>
        </ion-list>    
    </ion-content>  
    `
})
export class FacilitiesComponent {                 
    @Output() facilitySelected = new EventEmitter();

    private facilities:Array<Facility> = [];
    constructor( private nav: NavController ){ 

        for(let i=0;i<408;i++){
            this.facilities.push({Id:"_"+i, Type:"Type_"+i, isCompleted:i%2==0});
        }            
    }

    onFacilitySelected = (facility) => {
        this.facilitySelected.next(facility);
    }        
}

/** Modal Facilities List Page Component**/
import {Component} from "@angular/core";
import {App, ViewController, NavController} from "ionic-angular";

import {FacilitiesComponent} from "../../common/components/facilities";

@Component({    
    directives: [FacilitiesComponent],
    template: `
        <ion-header>   
            <ion-toolbar> 
                <button clear class="bar-button" (tap)="cancel()">
                    Cancel
                </button>                       
                <ion-title>Facilities</ion-title>            
            </ion-toolbar>
        </ion-header>                          
        <facilities (facilitySelected)="openFacilityOnMap($event)"></facilities>                                                              
    `
})
export class FacilitiesListPage{        

    constructor(private view:ViewController,                
                private nav:NavController){}

    ngOnInit(){       
    }

    cancel(){
        this.view.dismiss();
    }

    openFacilityOnMap(facility){
        this.view.dismiss(facility);        
    }    
}

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

Screenshots

Which Ionic Version? 1.x or 2.x

Ionic Version 2.0.0-beta.11

Run ionic info from terminal/cmd prompt: (paste output below)
Cordova CLI: Not installed
Gulp version: CLI version 3.9.0
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.0.0-beta.37
Ionic App Lib Version: 2.0.0-beta.20
OS: Windows 7 SP1
Node Version: v5.0.0

[jgw96]

Hello! Would you mind trying putting the virtual scroll list directly in your modal component instead of wrapping it in its own component? Thanks!

[Barryrowe]

I will give it a shot. My co-worker and I were just talking about this and thought it's probably related to the issues with a lot of ion-* components containing custom components.

What I really was hoping for was to be able to have the <ion-list [virtualScroll]> in it's own component that could be dropped on any page needed. I found that this doesn't work with the custom-component inbetween the <ion-list [virtualScroll]> and the <ion-content> This is what led me to having to put the <ion-content> inside of the component, which I'm not a big fan of either.

[jgw96]

Yeah this is something that we have discussed at length on the team and honestly don't have a good answer for yet honestly. I would love to know if my above solution works as that will confirm that this is the issue. Thanks!

[Barryrowe]

I have tried moving everything into the FacilityModalPage so the template code looks like this now:

<ion-header>   
            <ion-toolbar> 
                <button clear class="bar-button" (tap)="cancel()">
                    Cancel
                </button>                       
                <ion-title>Facilities</ion-title>            
            </ion-toolbar>
        </ion-header>                          
        <ion-content>       
            <ion-list [virtualScroll]="(facilityStream | async)">    
                <ion-item *virtualItem="let facility" 
                          class="facility" 
                          [class.complete]="facility.isCompleted">
                    <ion-icon *ngIf="facility.isCompleted" primary name="checkmark"></ion-icon>
                    {{facility.Id}} - {{facility.Type}}
                    <button item-right (tap)="openFacilityOnMap(facility)">View On Map <ion-icon name="map"></ion-icon></button>
                </ion-item>
            </ion-list>    
        </ion-content> 

The same issue occurs on the device or Simulator. Still works fine in the Browser. Thinking this through more, it seems like a styling thing when in "cordova mode" as all of the other issues with custom components interfering with <ion-* components also break in the Browser.

[jgw96]

@Barryrowe Thanks for testing. One more question, do you see this issue on Android also or just iOS?

[Barryrowe]

We haven't deployed to android, but I'll try to test it on the android emulator, but I don't have quick access to an Android device at the moment.

[Barryrowe]

FYI, this appears to be resolved in 2.0.0.rc3. There are still some bugs where the items are slow to load if you scroll too fast, but the items are bound by the modal window as they should be.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.