Can-swipe for checkbox

ionic-v1
1

Is it possible to have the can-swipe and option-buttons properties on the <checkbox> element?
The following works perfectly:

<item ng-repeat="item in devList" item="item" can-swipe="true" option-buttons="btns">
    {{ item.text }}
</item>

Then I was trying to get a checkbox in the item, and noticed that I should be using the <checkbox> element, however, this one doesn’t seem to support the option buttons.

<checkbox ng-repeat="item in devList" ng-model="item.checked"  ng-checked="item.checked" can-swipe="true" option-buttons="btns">
    {{ item.text }}
</checkbox>
2

What are these option-button attributes? Why would you want to swipe on checkboxes. They are really designed for tap events.

3

Because here they’re actimg like a list item with a checkbox. I want to swipe the entire item, not the checkbox. Imagine a todo app where the primary action is completing the task by checking it and the secondary actions are editing/removing it. These seconary actions could be hidden and shown when swept.

4

Is there any solution yet to swipe a checkbox-list? thanks in advance

5

I’m also creating one of those todo-apps where it would be nice to swipe on an ion-list with class item-checkbox. It kind of works, but it looks broken, because the text (item.content) goes behind the checkbox. This is my code:

<ion-list>
  <ion-item class="item item-checkbox" ng-repeat="item in items">
	<label class="checkbox checkbox-balanced">
	  <input type="checkbox" ng-model="item.checked" ng-change="checkedChange(item)">
	</label>
	{{ item.content }}
	<ion-option-button class="button-info">
	  Edit
	</ion-option-button>
  </ion-item>
</ion-list>
6

Also would be very interested if anyone comes up with a fix for this. Doing the same technique that iverjo recommended, but it creates a horrible looking UI.

7

Found a fix for this.

Add a custom class to ion-item

<ion-list can-swipe="true">
  <ion-item class="custom-class item item-checkbox" ng-repeat="item in items">
	<label class="checkbox checkbox-balanced">
	  <input type="checkbox" ng-model="item.checked" ng-change="checkedChange(item)">
	</label>
	{{ item.content }}
	<ion-option-button class="button-info">
	  Edit
	</ion-option-button>
  </ion-item>
</ion-list>

Then in your css file add these.

.custom-class {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.custom-class .checkbox input{
  left: -50px !important;
}

This worked for me HTH