<ion-nav> tag causing buttons to not be clickable on page

Question

I am using Ionic 3 and Angular 4 to develop an app right now and I have my HomePage with two side menus with some options and buttons in each, one side menu has a button to show results in an ion-list of ion-cards. But when I try and put buttons anywhere in the view (other than inside the header or menus) they are not clickable and do not cause the (click) event to be fired. I have traced it down to the tag I have added to my tag to get the menus to pop open. If I remove the new ion-nav tag the buttons are clickable but the menus do not work. Below is a minimal amount of code to show what I have done.

home.html

<ion-header>
  <ion-navbar style="text-align: center">

    <ion-buttons left>
      <button ion-button icon-only item-left (click)="toggleSettings()">
        <ion-icon name="menu"></ion-icon>
      </button>
    </ion-buttons>

    <ion-title>
      Battles
    </ion-title>

    <ion-buttons end>
      <button ion-button icon-only item-right (click)="toggleFilter()">
        <ion-icon name="search"></ion-icon>
      </button>
    </ion-buttons>

  </ion-navbar>
</ion-header>

<ion-content class="home" overflow-scroll="true">

  <ion-list [virtualScroll]="battles">

    <ion-card *virtualItem="let battle" (click)="openDetails(battle)">

      <ion-item>
        <button ion-button (click)="openDetails()">Details</button>
      </ion-item>

      <ion-card-content>
      </ion-card-content>

      <ion-row responsive-sm wrap>

      </ion-row>

      <ion-row>

      </ion-row>

    </ion-card>
  </ion-list>

  <ion-menu [content]="nav" id="settings" side="left">
    <ion-content>
      <ion-list>
        <button ion-item (click)="logOut()">Log Out</button>
      </ion-list>
    </ion-content>
  </ion-menu>

  <ion-menu [content]="nav" id="filter" side="right">
    <ion-content>
        <ion-item>
          <button ion-button (click)="loadItems()">Search</button>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>

  <ion-nav #nav [root]="rootPage"></ion-nav>
</ion-content>

app.html

<ion-nav #nav [root]="rootPage"></ion-nav>

I am sure it has something to do with the scope of the nav bar but I am unsure of how to get buttons to work within my ion list while also having those menus open on the home.html page.

Jay Bell Jay Bell · Accepted Answer · 2017-09-21T20:46:06

I figured out what was wrong with my code. I had the chunk of code with and below everything else, to fix my issue all I had to do was move it above the tag!

<ion-nav> tag causing buttons to not be clickable on page

1 Answers