[SOLVED] (click) event not working on majority of elements on page – Ionic 4



For some time all the click events were working for my Ionic app, then out of no where they have stopped. I have two floating action buttons that once had working click events; one would trigger a JS alert popup, and the other would open a modal.

These click events no longer work, the only elements that have working click events now are my ion-tab-buttons.


  • I have tried unwrapping these elements out of ion-items and ion-lists, still no change.

  • A simple ion-button as a replacement, still no change.

  • Moving the ion-button outside of the card element just below the opening ion-content tag, still no change.

  • Moving the ion-button outside of the ion-content; just above the tabs, still no change.

Any help is greatly appreciated.


<ion-header class="navbar">
  <div class="icons">
    <ion-buttons slot="start">
      <ion-menu-button color="tertiary"></ion-menu-button>
    <img src="assets/logo.png" />

<ion-content text-center>

      <ion-card-title>Contact Us</ion-card-title>
      <ion-card-subtitle>BOUTIQUE SOLICITORS</ion-card-subtitle>

      <ion-label><b>Head Office: Wembley</b>
        Boutique Immigration Solicitors, 10th Floor Tower, 1 Olympic Way, Wembley, Middlesex HA9 0NP
        DX: 51165 Wembley Park
        We are located just 5 minutes from Wembley Park Station. There is a car park behind our office.


      <ion-list text-left>
          <ion-label>Call us on 0800 3881 0211</ion-label>
          <ion-fab-button color="secondary" slot="end" size="small" (click)="callAlert()">
            <ion-icon name="call"></ion-icon>
          <ion-label>Email at [email protected]</ion-label>
          <ion-fab-button color="secondary" slot="end" size="small" (click)="modalEmail()">
            <ion-icon name="mail"></ion-icon>

  <ion-tab-bar slot="bottom">
    <ion-tab-button (click)="about()">
      <ion-icon name="information-circle-outline"></ion-icon>
      <ion-label>About Us</ion-label>
    <ion-tab-button (click)="dashboard()">
      <ion-icon color="blue" name="home"></ion-icon>
    <ion-tab-button class="activeTab">
      <ion-icon name="contacts"></ion-icon>
      <ion-label>Contact Us</ion-label>


import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router'
import { CallNumber } from '@ionic-native/call-number/ngx';
import { ModalController, AlertController } from '@ionic/angular';
import { EmailPage } from '../email/email.page';

  selector: 'app-contact',
  templateUrl: './contact.page.html',
  styleUrls: ['./contact.page.scss'],
export class ContactPage implements OnInit {

  constructor(private router: Router, private callNumber: CallNumber, private alertController: AlertController, private modalController: ModalController) { }

  ngOnInit() {

  about() {
    console.log('clicked about')

  dashboard() {
    console.log('clicked dashboard')


  async callAlert() {
    console.log('method executed')
    const callAlert = await this.alertController.create({
      message: "Are you sure you want to call Boutique Solicitors?",
      buttons: [{
        text: "Cancel",
        role: "cancel"

        text: "Call",
        handler: () => {this.callBS()}


  async callBS() {

    this.callNumber.callNumber("07847948252", false)
  .then(res => console.log('Launched dialer!', res))
  .catch(err => console.log('Error launching dialer', err))

  async modalEmail() {
    const modal = await this.modalController.create ({
      component: EmailPage



Well, I ended up figuring it out myself. The issue is that when ion-tabs are placed outside of the ‘ion-content’ at the bottom, if you inspect element on Chrome Dev Tools you can see that for some reason their “click-zone” takes up the whole page, and is indexed in front of all other elements. Trying to use “z-index” css property will not resolve the issue.

The fix is to wrap the ion-tabs inside an ion-toolbar, below the closing ‘ion-content’ tag. This will fix the click-zone to the restricted ion-toolbar height, which resolves the issue. All other page elements (click) events will now fire. This also fixes the issue of when tabs can prevent a page from scrolling.

Tested on both Android and iOS.

Ciao ciao.

Answered By – James Slater

Answer Checked By – Dawn Plyler (BugsFixing Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *