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 ???
Any unusual children of <ion-item>
need a placement directive. For example, try wrapping your <ion-row>
in <ion-grid item-content>
.
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>
You left out the item placement directive. Reread my earlier post.
Could you show me please the structure (even with empty elements) ?
De plus je suis français…
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>
Duveral
7
Yes, ion-toggle inside ion-col doesn’t work. It’s a bug.