Buttons are not clickable within ion-content

Ionic Framework ionic-v3
#1

I’ve got buttons which are not clickable when within the ion-content. When I bring them out, they work just fine. Here’s my HTML and SCSS.

<ion-content no-bounce>
  <div class="content_cover_exit">
    <button class="exit-button" (click)="logoutUser()">
      <ion-icon name="ios-exit-outline" class="icon-exit-class"></ion-icon>
      EXIT
    </button>
  </div>
</ion-content>

      .content_cover_exit {
        width: 100%;
        text-align: center;
        position: fixed;
        bottom: 70px;
        z-index: 9999;
        margin-bottom: constant(safe-area-inset-bottom);
        margin-bottom: env(safe-area-inset-bottom);
      }
      .exit-button {
        height: 2.0em;
        border-radius: 5px;
        opacity: 100%;
        background-color: white;
        font-size: 0.8em;
        font-weight: 400;
        letter-spacing: 1.2px;
        color: $dark-text;
        z-index: 999999;
      }
      .exit-button.activated {
        background-color: white;

      }
      .icon-exit-class {
        color: $dark-text;
      }
#3

Nope, I’ve tried that before, doesn’t work…

#4

Is you ion-content inside another ion-content?

#5

no, it’s not. just inside a single ion-content

#6

I just made a test app with your sample and it ran fine in the browser. I would check the rest of the markup to see if something is ‘off’.

#7

Something is off, just don’t know what!! Even *ngIf isn’t working… any idea where to at least look?

#8

In cases like this, start with a clean sandbox and build out the page in small steps to see what trips it up. Don’t assume anything is ‘correct’. Bugs like this can be frustrating.

I assume nothing is being written to console.

#9

A possible solution for you is trying ion-view instead of ion-content.

Ionic UI still has many bugs when they’re used with ng directive.
Last time, I tried ion-view instead of ion-item and it fixed my bug…

#10

That’s the horrible this. Console works PERFECTLY well! Logins works, the rendering doesn’t work! I’m confident it’s something on the HTML/DOM side.

For example, I’m changing a variable via *ngIf=“tempVar” in the code, and the DOM doesn’t re-render!

#11

My *ngIf part is outside ion-content. And the DOM isn’t being re-rendered when I change a variable via *ngIf=“switchVar”

#12

I would try to fix those properties… or try to remove them.

and definitely try to replace it with ion-view… otherwise I don’t see why it’s not working.
If this doesn’t work, you can file a bug report:

1 Like
#13

You might want to look into ChangeDetectorRef() in this case. With an emphasis on might. I don’t use it, as I just haven’t run into a need to, but another forumer seems to use and suggest it with success pretty often. Seems as though it’s relevant in situations like this, where the DOM isn’t updating as expected.

#14

I had this problem because I placed the ion-nav component within the template of a non-root page. Please don’t blame an Ionic newbie. Could be helpful.

#15

Ionic 5
Same problem here. I am using ion-tabs. For whatever reason it’s making the button totally unclickable.

removing in-tabs tag did solve the problem:

<ion-content>
  <ion-button class="btn-search" expand="block" (click)="clickMe()">FILTER</ion-button>
  <ion-list>
    <ion-card class="ion-padding">

    // some page content
    </ion-card>
  </ion-list>
</ion-content>
    // <ion-tabs>
      <ion-tab-bar slot="bottom" class="ion-padding-bottom">
        <ion-tab-button (click)="redeemPoints()">
          <ion-icon name="wallet-outline"></ion-icon>
          <ion-label class="lbl_tabs">Redeem</ion-label>
        </ion-tab-button>
    
        <ion-tab-button (click)="changePin()">
          <ion-icon name="key-outline"></ion-icon>
          <ion-label class="lbl_tabs">Change</ion-label>
        </ion-tab-button>
    
        <ion-tab-button (click)="logout()">
          <ion-icon name="log-out-outline"></ion-icon>
          <ion-label class="lbl_tabs">Logout</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    //   </ion-tabs>
1 Like
#16

AFAIK, the only legal first-level children of an Ionic component are <ion-header>, <ion-content> and <ion-footer>. There may be a situation whereby leaving any of those out implicitly wraps them in an <ion-content>, which you break by actually having an <ion-content>. I would never rely on that, though. So bottom line: put any and all component markup inside one of those three elements.

#17

The answer is simple, there is a bug in Ionic, the buttons don’t work when you have an ion-tab.

#18

Thanks, this fixed my issue

#19