4

I am trying to add a can-swipe gesture to a list item in ionic and also a right arrow icon to show that the particular 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 on browser the swipe gestures are not working(I am using firefox)), on swiping the buttons are not visible. But if I remove the icon classes( class="item item-icon-right" and class="icon ion-chevron-right icon-accessory">) everything works fine. I.e 

<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>

Can't understand the cause for such a behavior. Kindly help me in solving this. Also if anyone can share working examples for this problem statement that would be great.

Yatin
  • 727
  • 1
  • 9
  • 40
  • Not sure it is related but... shouldn't `item` in `ion-item` be set to `item="volunteer"`? – Guillem Vicens Feb 18 '16 at 08:40
  • yes thanks it should be, but that is not what is creating problems here. I have edited the question though – Yatin Feb 18 '16 at 08:49
  • 1
    I think `ionic` might be getting confused by the `icon` class applied to the `i` and `ion-option-button` tags. If you eliminate it and use the `option-buttons` attribute in `ion-list` assigning it a function to create the option buttons it sort of works. Check this [codepen](http://codepen.io/ajoslin/pen/Hdmqr) to see how to use that attribute – Guillem Vicens Feb 18 '16 at 10:28
  • @ Guillem Vicens , Thanks for the codepen it works and served my use case. I couldn't understand why my example didn't work. – Yatin Feb 23 '16 at 04:29
  • The same code pen is not working inside my app. The script used are different : whereas i am using the following version of ionic bundle 1.2.1-nightly-1867. – Yatin Feb 23 '16 at 06:44
  • Sorry to hear that. It might have something to do with a bug in the nightly version... – Guillem Vicens Feb 23 '16 at 07:06

0 Answers0