I have a list that can be reordered and slided, with some component inside.
As the documentation says: “Checkbox can be placed in an ion-item or used as a stand-alone checkbox”.
Without the ion-item tag, nothing is displayed.
With the ion-item tag, i have a GUI issue (see image).
That’s happen only when i try to use checkbox inside an ion-list and ion-item-sliding tag.
What’s the problem?
Code
<ion-list reorder="true" (ionItemReorder)="reorderItems($event)">
<ion-item-sliding *ngFor="let alimento of listaSpesa">
<ion-item text-wrap [ngStyle]="{'background-color': alimento.colore}">
<ion-row center>
<ion-item [ngStyle]="{'border': '0px'}">
<ion-checkbox (click)="setChecked(alimento)"></ion-checkbox>
</ion-item>
</ion-row>
</ion-item>
<ion-item-options side="right">
<button danger (click)="deleteNote(alimento)">
<ion-icon name="trash"></ion-icon>
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
There are no problems with other components in the same place.
Clean some code… Still the issue.
<ion-list reorder="true" (ionItemReorder)="reorderItems($event)">
<ion-item-sliding *ngFor="let alimento of listaSpesa">
<ion-item text-wrap>
<ion-row>
<ion-col>
<ion-item>
<ion-checkbox (click)="setChecked(alimento)"></ion-checkbox>
</ion-item>
</ion-col>
<ion-col>
<button clear disabled full style="opacity: 1;">
<img class="imgAlimenti" src="{{alimento.userImg}}">
</button>
</ion-col>
</ion-row>
</ion-item>
</ion-item-sliding>
</ion-list>
I had a similar issue, two reorder handles were placed in the item,
but this happened because there are nested 'ion-items’
you have to use ‘ion-label’ to put text in an item with a checkbox.
(http://ionicframework.com/docs/v2/api/components/checkbox/Checkbox/)
another quick solution would be to add some css to remove the 'ion-reorder’
from the inner ‘ion-item’
something like:
.item-inner .item-inner ion-reorder {
display: none;
}
1 Like
Thx for the answer 
The css trick, certainly, would do the job, but don’t like so much that solution…
I have no text in that item anyway.
Would be cool to know how to use nested ion-item in such situation!
How you solved so? Using the css or changing the logic?
my list now looks like this:
but I dont thing you can use it with multiple columns, if you dont want to use css, you have to figure out some way to remove the ‘ion-item’ containing your checkbox.
<ion-list reorder="true" (ionItemReorder)="reorderTasks($event)" no-lines>
<ion-item-sliding #slidingItem *ngFor="let task of taskList; let index = index ">
<ion-item text-wrap item-left detail-push>
<ion-checkbox (click)="toggleComplete(listId, task)" [checked]="task.status!='needsAction'"></ion-checkbox>
<ion-label [class.completed]="task.status!='needsAction'">{{ task.title }} - {{task.notes}}</ion-label>
</ion-item>
<ion-item-options (ionSwipe)="navToEdit(task, index); slidingItem.close()">
<button (click)="navToEdit(task, index); slidingItem.close()">Edit</button>
<button danger (click)="deleteTask(listId, task, index)">
<ion-icon name="trash"></ion-icon>
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
Without the grid, it work well.
Maybe with the next updates, it will be allowed. 
For now, using ccs, thx you.
