[Modal Mode] Can't scroll down to load other months

[ramoncarreras]

Ionic version: [ ] 2.x [X] 3.x [ ] 4.x

Ion2-calendar mode: [ ] components mode [X] modal mode

I'm submitting a ... [X] bug report [ ] feature request [ ] help me

Current behavior: I'm facing an issue using 2.2.0 version of ion2-calendar on iPhone 6+, 7+, 8+, X, Xs and Xr devices (ionic mode in my project is always 'md' or 'Material Design').

When the calendar's modal is opened, this is unable to load more than 2 months and I can't not scroll down to trigger ion-infinite-scroll.

This is not happening in 2.1.7 version of ion2-calendar.

Expected behavior: It should be able to scroll and load the following months.

Steps to reproduce: Create new ionic 3 project and install ion2-calendar:

ionic start calendarTest blank --type=ionic-angular

cd calendarTest

npm install ion2-calendar moment --save

Import module to app.module.ts and change ionic mode to "md" using config:

@NgModule({
    declarations: [
        MyApp,
        HomePage,
    ],
    imports: [
        BrowserModule,
        IonicModule.forRoot(MyApp, {
            mode: 'md',
        }),
        CalendarModule,
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        MyApp,
        HomePage,
    ],
    providers: [
        StatusBar,
        SplashScreen,
        {provide: ErrorHandler, useClass: IonicErrorHandler},
    ],
})
export class AppModule {}

Add button in home page to show ion2-calendar's basic modal:

<ion-header>
    <ion-navbar>
        <ion-title>
            Ionic Blank
        </ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>

    <button ion-button block (click)="openCalendar()">
        SHOW CALENDAR
    </button>

</ion-content>

@Component({
    selector: 'page-home',
    templateUrl: 'home.html',
})
export class HomePage {

    constructor(
        private modalCtrl: ModalController,
    ) {

    }

    openCalendar() {
        const options: CalendarModalOptions = {
            title: 'BASIC',
        };
        let myCalendar = this.modalCtrl.create(CalendarModal, {
            options: options,
        });

        myCalendar.present();

        myCalendar.onDidDismiss((date: CalendarResult, type: string) => {
            console.log(date);
        });
    }

}

Test application into one of the devices I provided.

Other information:

Ionic info:

Ionic:

   ionic (Ionic CLI)  : 4.10.3 (/Users/ramon.carreras/.nvm/versions/node/v8.11.3/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.3
   @ionic/app-scripts : 3.2.1

System:

   NodeJS : v8.11.3 (/Users/ramon.carreras/.nvm/versions/node/v8.11.3/bin/node)
   npm    : 5.6.0
   OS     : macOS High Sierra

[felixja]

Check CSS, in our case it was an overflow-y:hidden on the modal caused by the style of another element...

[philipp-reich]

@ramoncarreras great description for this issue.

i had the same issue. If the problem still exists:

My solution:

let options: CalendarModalOptions = { defaultScrollTo: moment().add(1, 'month').toDate(), ...

You can set the "defaultScrollTo" option and this problem is solved.

BG Philipp

[ramoncarreras]

Hi @philipp-reich.

What you propose is not exactly a solution, rather it is a workaround. Thank you anyway.

Unfortunately, it does not help me because I have a custom component to show calendars and I already use the defaultScrollTo option for other use cases.

My workaround was downgrade to 2.1.7 version.

[dkd051]

I have the same issue. ios style works well on my iPhone XR. I tested on chrome web developer emulator(resolution 375x800) I used canBackwardsSelected option false.