[SOLVED] Buttons on Modal Pages won't click on iOS Devices

Hi Everyone,

I was wondering if anyone else had come across this problem specifically with iOS devices. Basically, any buttons that I create on my modal page within the ion-content don’t register the click event. Strangely, the button in the ion-header does register the click event on iOS devices.

It works perfectly fine on the web browser when developing and it works perfectly fine with Android devices. If anyone can help, I’d really appreciate it! Thank you.

Typescript:

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

  pageTitle: string;
  addresses: any;

  constructor(public navCtrl: NavController, public navParams: NavParams, public viewCtrl: ViewController) {

    this.pageTitle = navParams.get('pageTitle');
    this.addresses = navParams.get('data').Items;

  }

  dismiss(id) {
    this.viewCtrl.dismiss({
      id: id
    });
  }

Template HTML:

<ion-header>
  <ion-navbar>
    <ion-buttons left>
      <button ion-button icon-only (click)="dismiss('close')" tappable>
         <ion-icon color="mainlineBlack" name="close"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>{{pageTitle}}</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>

  <ion-list *ngFor="let a of addresses" >
    <ion-item (click)="dismiss(a.Id)" tappable>
      {{a.Text}}, {{a.Description}}
    </ion-item>
  </ion-list>

</ion-content>
1 Like

Hmm, I just gave it a shot and it seems to work.
Though, you should always be using ion-content in your pages.

Thanks for trying. I’ll try again with a new blank page and see if it is something to do with the current page it’s rendering. It’s strange as it does currently work with Android devices ok just on the iOS emulator / device it doesn’t.

I’ve solved this now! It was due to me having a loading controller not being dismissed in the background of the page being displayed as a modal. I dismissed the loading before the modal control presented the page and it now works ok.

2 Likes

Hi, I have the same problem but I don’t understand your solution.
My App loads a url on start with a LoadingController and I dismiss it when the loading is done, but I still can’t click the buttons in the iOS emulator and on an iPhone.
But it works with the browser and on an Android device.


edit:
Sorry, I figured out it doesn’t have something to do with the LoadingController.
I have made a new topic about my problem.

I have had the same problem, I hope there was a way to get it working with the loading, otherwise i have to dismis the loading before the modal and present it again after the modal is gone

I don’t have a loading controller, and I’m still experiencing this issue…

I don’t have a loading controller, and I’m still experiencing this problem.

I know its been more than a year, but seriously? Thank you. You just saved me from a bind. Same solution.

1 Like