Scroll not working when from Popover

Ionic Framework ionic-v3
1

I have a page, that scrolls perfectly when I navigate to the page from another page. However, when I navigate to the page from a Popover, the page displays, but I am unable to scroll.

Any ideas please?

Navigate to page from Popover and other page is the same:

this.nav.push(CategoryPage, {
  employeeModel: this.employeeModel,
  fromSearch: true
});

page:

<ion-header>
  <ion-navbar>
    <ion-title>{{categoryModel.name}}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <center>
    <ion-spinner icon="android" *ngIf="loading"></ion-spinner>

    <div class="category-text animate-show">
      <div class="select-text" *ngIf="getSelected().length === 0">Select the Roles</div>
      <p class="item-selected-row" *ngFor="let subcategory of getSelected()">
        <img class="item-stable" id="icon-image-{{subcategory.id}}" src="{{subcategory.icon}}" (click)="toggleItem(subcategory)"/>
      </p>
    </div>
  </center>

  <ion-row *ngFor="let trio of getTriples()">
    <ion-col *ngFor="let item of trio">
      <center>
        <div class="row responsive-md">
          {{ formatSubCategories(item) }}
          <img class="item-stable-large" id="icon-image-{{item.id}}" src="{{item.icon}}" (click)="toggleItem(item)"
            [class.item-selected]="isSubCategoryModelItemInArray(item) > -1" />
          <p>{{item.name}}</p>
        </div>
      </center>
    </ion-col>
  </ion-row>

  <ion-buttons>
    <button (click)="next()" block round class="form-button-text">Next</button>
  </ion-buttons>

</ion-content>

popover

import {Component, ViewChild, ElementRef} from '@angular/core';
import {App, PopoverController, NavController, Content, NavParams} from 'ionic-angular';
import {NgForm} from '@angular/forms'
import { MapPage } from '../map/map';
import { CategoryPage } from '../category/category';
import { EmployeeModel } from '../model/employeeModel';

@Component({
  template: `
    <ion-content padding id="search-popover">
      <ion-list>
        <ion-row>
          <ion-col>
            <center>
              <div id="pinButton"><button class="search-popover-button" (click)="presentFilterMap()" danger><ion-icon class="search-popover-icon" name="pin"></ion-icon></button></div>
              <p>Location</p>
            </center>
          </ion-col>
          <ion-col>
            <center>
              <div id="pinButton"><button class="search-popover-button" (click)="presentFilterCategories()" primary><ion-icon class="search-popover-icon" name="happy"></ion-icon></button></div>
              <p>Sectors</p>
            </center>
          </ion-col>
        </ion-row>
      </ion-list>
    </ion-content>
  `
})
export class SearchPopOverPage {
  private nav: NavController = null;
  private employeeModel: EmployeeModel = null;

  constructor(private navParams: NavParams, nav: NavController) {
    this.nav = nav;
    this.employeeModel = navParams.get('employeeModel');
  }

  ngOnInit() {

  }

  presentFilterMap(event: Event) {
    this.nav.push(MapPage, {
      employeeModel: this.employeeModel,
      fromSearch: true
    });
  }

  presentFilterCategories(event: Event) {
    this.nav.push(CategoryPage, {
      employeeModel: this.employeeModel,
      fromSearch: true
    });
  }
}
2

Solution:

  presentFilterCategories(event: Event) {
    this.viewCtrl.dismiss().then(() => {
      this.nav.push(CategoryPage, {
        ev: event,
        employeeModel: this.employeeModel,
        fromSearch: true
      })
    });
  }