Ionic 3: unable to scroll popover content in iOS

Question

I have a page that can be displayed properly as a single page. However, when I show it using Popover controller, its content cannot be scrolled on iOS 11.2. On Android, the popover works fine.

Here is my ionic info (by running ionic info)

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0
global packages:

cordova (Cordova CLI) : 8.0.0 
local packages:

@ionic/app-scripts : 3.1.8
Cordova Platforms  : android 7.0.0 ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2
System:

Android SDK Tools : 25.2.5
Node              : v8.10.0
npm               : 5.6.0 
OS                : macOS Sierra

Here is my code:

showRoutes(event) {
    let popover = this.popoverCtrl.create(MyPage, {});
    popover.present({
      ev: event
    });
  }

This is MyPage html:

<ion-header>
  <ion-navbar>
    <ion-title>Routes</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <div ion-item class="list-header">
      <div>Location</div>
      <div class="item-note" item-right>Distance (miles)</div>
    </div>
    <button ion-item *ngFor="let item of evacuationPoints">
      <div>{{item.title}}</div>
      <div class="item-note" item-right>{{item.distance}}</div>
    </button>
  </ion-list>
</ion-content>

Does any one have the same problem and know how to fix? if this cannot be fixed, then Popover is useless. In the screenshot below, the list is hidden and unable to scroll up on iOS only.

I am facing the same issue. Did you find a solution?

Pooja Shah
– Pooja Shah

2018-05-21 07:48:22 +00:00
Commented May 21, 2018 at 7:48 — Pooja Shah
– Pooja Shah, Commented May 21, 2018 at 7:48
@pooja-shah: See my finding below.

tala9999
– tala9999

2018-05-21 11:52:34 +00:00
Commented May 21, 2018 at 11:52 — tala9999
– tala9999, Commented May 21, 2018 at 11:52

tala9999 · Accepted Answer · 2018-05-21 12:08:29Z

2

Using <ion-scroll scrollY="true"> this instead of <ion-content> solves this issue.

MyPage html becomes:

<ion-header>
  <ion-navbar>
    <ion-title>Routes</ion-title>
  </ion-navbar>
</ion-header>

<ion-scroll scrollY="true">
  <ion-list>
    <div ion-item class="list-header">
      <div>Location</div>
      <div class="item-note" item-right>Distance (miles)</div>
    </div>
    <button ion-item *ngFor="let item of evacuationPoints">
      <div>{{item.title}}</div>
      <div class="item-note" item-right>{{item.distance}}</div>
    </button>
  </ion-list>
</ion-scroll>

edited May 21, 2018 at 12:08

answered May 21, 2018 at 11:51

tala9999

1,7493 gold badges18 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Marcus Revaj · Accepted Answer · 2019-09-02 10:20:22Z

0

try adding scrollY="false" in the popOver component

<ion-content scrollY="false">
  <ion-list>
    <ion-item>Some item</ion-item>
    <ion-item>Some item2</ion-item>
  </ion-list>
</ion-content>

This helped in my project, as it seemed that the inner scroll on iOS was blocking the natural popOver scroll

answered Sep 2, 2019 at 10:20

Marcus Revaj

191 bronze badge

1 Comment

Geter Moura Over a year ago

Issue still present on Ionic 6. Seems counterintuitive but that fixed the issue for me on iOS and kept working just fine on Android. Dunno why it had a -1 vote.

Collectives™ on Stack Overflow

Ionic 3: unable to scroll popover content in iOS

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related