Button clickable in Browser, not clickable in simulator

Ionic Framework ionic-v3
1

I’m totally lost here, I’ve got the following button/list item, and it work fine in the Browser, while it doesn’t work at all in the simulator or on a device. I’ve got a Google Map on the same page, but removing it doesn’t help the functioning of the button either.

<ion-list>
    <button ion-item (click)="addStageType('Type')" class="addLocationButton">Next</button>
</ion-list>
2

If you aren’t getting anywhere with this you could install crosswalk just to test and see if it’s the WebView of the device you’re testing on.

3

I have figured it out. The problem is with , for some reason it messes up the clickability of buttons (only in Simulator and on Device). works fine.

I got a new problem with now, my custom back button doesn’t animate with page transitions…

4

Hi,

I use a custom back button, and this is how it works :

  • In my view :

<ion-col width-20 (tap)="goBack()">

  • In my ts file :

      goBack(){
    	this.navCtrl.pop();
    }

You can add params to the pop function, like animate (true, false), or animation (‘ios-transition’, …).

Hope it helps

5

Thanks! Can you please make an example how to pass these parameters to the pop() method? I couldn’t find a single example in Ionic docs. Thanks!

6

Something like that should work (not tested) :

goBack(){
  	this.navCtrl.pop({
  	   animate: true,
  	   animation: 'ios-transition'
  	});
  }
7

The code works, but my “custom back icon” still doesn’t slide in/out, just pops in the right top hand corner as before (e.i. back UI)…

8

Oh, I misunderstood your issue, sorry.

That’s weird, It works for me. Is it just your icon that doesn’t slide, or the whole page ?

For example, I have a page that lists user’s bills. When I tap on one, I go to the bill’s page :

this.navCtrl.push(BillDetailPage, {
  		bill: bill
  	},
  	{
      //options
  	}
  	);

As my custom back button is a part of the view, it slides in/out like the other elements of the page. Here is my view :

<ion-header animation="no-animation">
  <ion-navbar color="{{theme.headerColor}}" animation="no-animation">
    [...]
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-grid>
    <ion-row class="custom-header">
      <ion-col width-20 (tap)="goBack()">
        <ion-icon name="md-arrow-back"></ion-icon>
      </ion-col>
      <ion-col width-67>Bill N° {{selectedBill.number}}</ion-col>
    </ion-row>
   </ion-grid>

    <!-- content -->
    [...]
</ion-content>
9

The problem is only with the back icon, the rest of the page and the header slides in just fine.
This is my code:

  <ion-navbar hideBackButton>
    <button ion-button clear navPop>
      <ion-icon class="back-arrow-class" name="back-arrow" item-left></ion-icon>
    </button>
    <ion-title>Title</ion-title>
  </ion-navbar>

Why did you nest your back button within the ion-content? If it’s there, then it slides in well, but I can’t get the button all the way up into the header section where my Title is.

10

I put the back button within the ion-content because I already have icons in the header (for side menus), so I kind of have two headers.

So I don’t know how to solve your problem. The only solution I think of is to put your back icon within the ion-title tag (which slides), and apply some attributes/css to it to place the button where you want it to be. May be there is a better way to do it, but I don’t know it.

1 Like
11

I’ve never seen ion-item used as a directive inside a button. Is that supported by documentation? These things sometimes change and I might have missed it. But are you sure you don’t want ion-button instead?

12

YES!!! SUCCESS THAT WORKED! I used ion-button, but ion-item also works (comment reply for the below comment).

Thanks for the awesome idea!