# Checkbox in sliding and reordering list - issue

**URL:** <https://forum.ionicframework.com/t/checkbox-in-sliding-and-reordering-list-issue/63189>\
**Category:** ionic-v3\
**Created:** [September 12, 2016, 3:42pm UTC](https://forum.ionicframework.com/t/checkbox-in-sliding-and-reordering-list-issue/63189 "2016-09-12T15:42:33Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Andrea-W](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/andrea-w/32/105938_2.png) [@Andrea-W](https://forum.ionicframework.com/u/Andrea-W)\
**Post date:** [September 12, 2016, 3:42pm UTC](https://forum.ionicframework.com/t/checkbox-in-sliding-and-reordering-list-issue/63189/1 "2016-09-12T15:42:33Z")

</div>

I have a list that can be reordered and slided, with some component inside.

As the documentation says: “[Checkbox](http://ionicframework.com/docs/v2/api/components/checkbox/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?

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/b/8/b86e41d7203e86e601c92496adf5af0bd9bdac48.jpg)

**Code**

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/3/1/3120911ea9dd6030308587bd4c7dc938ca136663.jpg)

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

---

<div class="post-metadata">

**Author:** ![Andrea-W](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/andrea-w/32/105938_2.png) [@Andrea-W](https://forum.ionicframework.com/u/Andrea-W)\
**Post date:** [September 13, 2016, 7:25am UTC](https://forum.ionicframework.com/t/checkbox-in-sliding-and-reordering-list-issue/63189/2 "2016-09-13T07:25:02Z")

</div>

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>

```

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/5/3/53cf7a0fbf6e1a15639581801db64e6d21dc4bf5.png)

---

<div class="post-metadata">

**Author:** ![evertschone](https://avatars.discourse-cdn.com/v4/letter/e/e19b73/32.png) [@evertschone](https://forum.ionicframework.com/u/evertschone)\
**Post date:** [September 13, 2016, 11:16pm UTC](https://forum.ionicframework.com/t/checkbox-in-sliding-and-reordering-list-issue/63189/3 "2016-09-13T23:16:38Z")

</div>

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/](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;  
}

---

<div class="post-metadata">

**Author:** ![Andrea-W](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/andrea-w/32/105938_2.png) [@Andrea-W](https://forum.ionicframework.com/u/Andrea-W)\
**Post date:** [September 14, 2016, 7:30am UTC](https://forum.ionicframework.com/t/checkbox-in-sliding-and-reordering-list-issue/63189/4 "2016-09-14T07:30:44Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![evertschone](https://avatars.discourse-cdn.com/v4/letter/e/e19b73/32.png) [@evertschone](https://forum.ionicframework.com/u/evertschone)\
**Post date:** [September 14, 2016, 1:26pm UTC](https://forum.ionicframework.com/t/checkbox-in-sliding-and-reordering-list-issue/63189/5 "2016-09-14T13:26:40Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Andrea-W](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/andrea-w/32/105938_2.png) [@Andrea-W](https://forum.ionicframework.com/u/Andrea-W)\
**Post date:** [September 14, 2016, 1:48pm UTC](https://forum.ionicframework.com/t/checkbox-in-sliding-and-reordering-list-issue/63189/6 "2016-09-14T13:48:25Z")

</div>

Without the grid, it work well.  
Maybe with the next updates, it will be allowed. 😅

For now, using ccs, thx you.