Ion-toggle bug

Ionic Framework ionic-v3
#1

I do not understand where is the problem :

<ion-content>
    <ion-item text-center class="vertical-align-content">
        <ion-input type="text" class="form-control" placeholder="Enter and add a town..." [(ngModel)]="newtown"></ion-input>
    </ion-item>
    <button ion-button (click)="add()">Search</button>
    <ion-item *ngFor="let widget of widgets" text-center class="vertical-align-content">
        <ion-row>
            <ion-col>{{widget.name}}</ion-col>
            <ion-col><button ion-button color="danger" (click)="deleteWidget(widget, $event)">
                    <ion-icon name="trash"></ion-icon>
                </button>
            </ion-col>
            <ion-col>
                <ion-toggle [(ngModel)]="widget.visibility" checked="widget.visibility" (ionChange)="changeWidget(widget, $event)"></ion-toggle>
            </ion-col>
        </ion-row>
    </ion-item>
</ion-content>

if I remove the toggle column it displays well but with the toggle column nothing appears ???

#2

Any unusual children of <ion-item> need a placement directive. For example, try wrapping your <ion-row> in <ion-grid item-content>.

#3

Thanks for your answer. I tried this code but it fails too.

<ion-content>
    <ion-item text-center class="vertical-align-content">
        <ion-input type="text" class="form-control" placeholder="Enter and add a town..." [(ngModel)]="newtown"></ion-input>
    </ion-item>
    <button ion-button (click)="add()">Search</button>
    <ion-item *ngFor="let widget of widgets" text-center class="vertical-align-content">
        <ion-grid>
            <ion-row>
                <ion-col>{{widget.name}}</ion-col>
                <ion-col><button ion-button color="danger" (click)="deleteWidget(widget, $event)">
                    <ion-icon name="trash"></ion-icon>
                </button>
                </ion-col>
                <ion-col>
                    <ion-toggle [(ngModel)]="widget.visibility"></ion-toggle>
                </ion-col>
            </ion-row>
        </ion-grid>
    </ion-item>
</ion-content>
#4

You left out the item placement directive. Reread my earlier post.

#5

Could you show me please the structure (even with empty elements) ?
De plus je suis français… :wink:

#6

Solved like that :

<ion-header>
    <ion-navbar>
        <ion-title>
            My Settings
        </ion-title>
    </ion-navbar>
</ion-header>
<ion-content class="has-header">
    <ion-list>
        <ion-item>
            <ion-input type="text" class="form-control" placeholder="Enter and add a town..." [(ngModel)]="newtown"></ion-input>
            <button ion-button item-end (click)="add()">Search</button>
        </ion-item>

        <ion-item *ngFor="let widget of widgets" class="vertical-align-content">
            <ion-label>{{widget.name}}</ion-label>
            <ion-toggle [checked]="widget.visibility" (ionChange)="changeWidget(widget)"></ion-toggle>
            <button ion-button item-end color="danger" (click)="deleteWidget(widget,$event)">
                    Delete
                </button>
        </ion-item>
    </ion-list>
</ion-content>
#7

Yes, ion-toggle inside ion-col doesn’t work. It’s a bug.