Right arrow of a list item conflicting with gesture gestures can-swipe ionic

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.

+4
source share

Source: https://habr.com/ru/post/1629316/


All Articles