Ionic-framework: Ion-checkbox in an ion-list prevents ion-option-button from showing ionic

[oaksagelew]

I created an ion-list in which each ion-item has an ion-checkbox. The ion-list has an option for an ion-delete button and an ion-option button. In the list, the ion-delete button shows up fine, but with an ion-checkbox present, I can no longer swipe left to reveal the ion-option button. Here's my markup:

<div>
   <ion-content has-header="true">
        <form method="post" ng-submit="inviteContacts()" name="inviteForm">
            <ion-list show-delete="appearance.showDeleteIcon" type="card">
                <ion-item class="rs-item item-icon-right" ng-repeat="contact in contacts">
                    <div style="display:inline">
                        <ion-checkbox ng-model="contact.checked" ng-checked="contact.checked">
                        <img ng-src={{contact.avatar}}>
                        <p>{{contact.displayName}}</p>
                    </ion-checkbox>
                </div>
                <ion-option-button class="button-assertive" ng-click="edit(item)"> Edit </ion-option-button>
                <ion-delete-button class="ion-close-round" ng-click="onItemDelete(item)"></ion-delete-button>
            </ion-item>
        </ion-list>
    </form>
</div>
</ion-content>
<div class="bar-royal ng-enter bar bar-footer">
     <div class="button-bar">
        <button ng-click="flipDelete()" class="button button-icon icon ion-close-round">&nbsp;&nbsp;&nbsp;Remove</button>
        <button ng-click="checkAll()" ng-model="selectAll" class="button button-icon icon ion-checkmark-circled">&nbsp;&nbsp;&nbsp;{{words.buttontext}}</button>
        <button ng-click="submitExternal()" class="button button-royal">Invite Contacts</button>
    </div>
 </div>
</div>  

This is consistent and easy to check: simply comment out the <ion-checkbox> tag and the list item becomes left-swipeable, revealing the option button. Reinstate the <ion-checkbox> and you can no longer left-swipe.

Any ideas as to what might be going on? A problem in my markup? An Ionic issue? Something else? I'd like to have that option button available if at all possible. And it's a handy feature in any case: having a list item with a checkbox shouldn't preclude it also featuring option buttons; if you can have a delete button, you should also be able to have an option button. (Unless it's a bug in my markup.)

Thanks!

[mhartington]

So this kind of item isn't support at the moment. Post 1.0, we should make this possible to use all the item types (toggle, checkbox, radio) with the option, delete, and reorder buttons.

cc @adamdbradley and @perrygovier

[dtelaroli]

+1

[dorav]

Did anyone manage to find any workaround until this is fixed?

[dtelaroli]

I got with toggle component.

.item-toggle-option .toggle {
    position: absolute;
    top: 8px;
    right: 16px;
    z-index: 3;
}

<ion-list>
      <ion-item ng-repeat="item in items" class="item-toggle-option item-remove-animate">
        {{item.label}}
        <label class="toggle toggle-balanced">
          <input type="checkbox" ng-model="item.checked">
         <div class="track">
           <div class="handle"></div>
         </div>
        </label>
        <ion-option-button class="button-assertive" ng-click="remove(item)">
          Remove
        </ion-option-button>
      </ion-item>
</ion-list>

[danielptn]

i have the same problem.. 1 year and anyone solution? =(

[danbucholtz]

Hi @oaksagelew and others,

The Ionic team is looking at this issue and we are trying to understand the use cases for swipeable toggles/checkboxes/etc. Can you elaborate on that please so we can better understand it?

As it stands now, I don't think we'll support this functionality in Ionic 1.x

Please let us know your thoughts on the topic and if viable alternatives exist. Please at mention @jgw96 in your response so he can stay on top of it.

Thanks,
Dan

[controversial]

@jgw96 Are swipeable item-avatars supported? This isn't working for me:

<ion-item class="item-avatar">
  <img ng-src="{{message.sender.picture}}">
  <h2>{{message.sender.name}}</h2>
  <p>{{message.readableTimeDelta}}</p>

  <ion-option-button class="button-assertive icon ion-trash-b"></ion-option-button>
</ion-item>