I am trying to add a can-swipe gesture to a list item in ionic, as well as a right arrow icon to show that a specific list item is swipable.
<ion-content>
<ion-list show-delete="false" can-swipe="true" >
<ion-item item="volunteer" ng-href="#" class="item item-icon-right" ng-repeat="volunteer in dummyData.Volunteers" >
<i class="icon ion-chevron-right icon-accessory"></i>
{{volunteer.name}}
<br>
{{volunteer.phone_number}}
<ion-option-button class="button-light icon ion-heart"></ion-option-button>
<ion-option-button class="button-light icon ion-email"></ion-option-button>
<ion-option-button class="button-assertive icon ion-trash-a"></ion-option-button>
</ion-item>
</ion-list>
</ion-content>
When I debug this on my Android device (as in the browser, swipe gestures do not work (I use firefox)), the buttons are not visible when scrolling. But if I delete the icon classes (class = "item item-icon-right" and class = icon-chevron-right icon-accessory ">), everything will be fine. Ie
<ion-content>
<ion-list show-delete="false" can-swipe="true" >
<ion-item item="volunteer" ng-href="#" ng-repeat="volunteer in dummyData.Volunteers" >
{{volunteer.name}}
<br>
{{volunteer.phone_number}}
<ion-option-button class="button-light icon ion-heart"></ion-option-button>
<ion-option-button class="button-light icon ion-email"></ion-option-button>
<ion-option-button class="button-assertive icon ion-trash-a"></ion-option-button>
</ion-item>
</ion-list>
</ion-content>
I can not understand the reason for this behavior. Please help me resolve this. Also, if anyone can share working examples for this problem, that would be great.
source
share