Link in ion-list not working (because of "disable-user-behavior" class?)


#1

I’m trying to drop a link into an ion-list and it’s working in chrome but I can’t seem to get it working on an iOS device or in the iOS sim. You tap the icon link and nothing happens. Here’s the code I have:

<div class="people-bar">
<ion-list class="people-bar-content" ng-controller="PeopleBarCtrl">
    <ion-item ng-repeat="person in people" class="people-bar-item">
        <a ng-href="{{ person.url }}">
        	<img class="people-bar-content-person" ng-src="{{person.image}}" />
        </a>
    </ion-item>
    <ion-item class="people-bar-more people-bar-item" style="margin-left: 2%;">+{{remaining}}</ion-item>

    <ion-item class="people-bar-all people-bar-item"></ion-item>
    <a href="#/exp-attendees" class="ionicon ion-chevron-right"></a>
</ion-list>
<div class="transparent-bar"></div>

I’m having trouble with the link towards the end. I did notice that in the output in chrome, “disable-user-behavior” is added as a class onto the ion-list. Could this be the problem? Thanks!


#2

Did you try to debug this in your iOS simulator or iOS device? Some message is was printed on the log?? Try to debug and see if some message is sent, maybe some error message.


#3

Never got a console error anywhere, not in the browser or on the device.

Looks like it had something to do with the ion-list. Since I didn’t really need to use it here, I tried getting rid of it and voila, it works on my iPhone and in the sim. I tried just using the standard list/item setup (using those classes) but even that didn’t work. The only way I got it working was by removing the list structure entirely.


#4

Did you try instead of using a link, use the: on-tap="onTap()" in your ion-item?


#5

I’ve the same probleme, some links are working on the navigator and not on android emulator or device!
As merf64 said, there is no error on the console!!
Any solution for that?


#6

Same here with beta14 o_O


#7

try here: http://m.julienrenaux.fr/

with the browser every links are ok but if you use chrome dev tools to simulate a mobile device none of the links work :frowning:


#8

It is actually related to angular material that I use with Ionic. I created a ticket for them.

Cheers


#9

This may be a z-index issue with ion-list which lays the swipe options (delete etc) above the ion-item in the z-index. May be fixable by changing to a standard list.


#10

I’m tryng whit ul list, but nothing! Any ideas?!


#11

Hi,

Try removing the ng-href from <a> to <ion-item>, my code something likes this works:

<ion-list>
  <ion-item class="item-thumbnail-left" ng-repeat="product in products" ng-href="#/app/products/{{ product.id }}">
    <img class="item-image" ng-src="{{ product.default_image }}">
    <h2>{{ product.title }}</h2>
    <p><i class="icon ion-yen"></i> {{ product.price|currency:'':2 }}</p>
  </ion-item>
</ion-list>

And what exactly your person.url is?