Ion-checkbox in an ion-list prevents ion-option-button from showing

ionic-v1
1

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>

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.

Thanks!

2

this is the closest I’ve gotten

waiting to see if I can get help with aligning the checkbox with the text

3

no one solution for that one year problem? =(