Ion-datetime causes rendering issue in ion-item

Ionic Framework ionic-v3
1

How do I include an ion-datetime with other things in an ion-item?

Here is a simple repo from the blank starter with the ion-datetime issue:
https://github.com/dolthead/ionic-item-datetime

If I comment out the ion-datetime, the h2, input, and p display fine. But they don’t show up when there’s an ion-datetime in the same item.

        <ion-item *ngFor="let item of items">
            <h2><input type="text" [(ngModel)]="item.title"></h2>
            <p>more stuff</p>
            <div class="flex-col alarm-button" item-end (click)="picker.open()">
                <ion-icon name="alarm" color="primary"></ion-icon>
                <ion-datetime #picker displayFormat="h:mm a" pickerFormat="hmma" [(ngModel)]="startTime"></ion-datetime>
            </div>
        </ion-item>

There is some scss to shrink the ion-datetime and move it to the right. See the above github repo.

I’ve also tried using NgZone, ChangeDetectorRef, and ApplicationRef to force refresh, but no luck.

2

Kudos to @corymc for leading me to the ion-content details in the item docs:


Here is the updated code that displays all the content:

        <ion-item *ngFor="let item of items">
            <div item-content class="flex-col">
                <ion-input type="text" [(ngModel)]="item.title"></ion-input>
                <p>more stuff</p>
            </div>
            <div class="flex-col alarm-button" item-end>
                <ion-icon name="alarm" color="primary" ></ion-icon>
                <ion-datetime #picker displayFormat="h:mm a" pickerFormat="hmma" [(ngModel)]="startTime"></ion-datetime>
            </div>
        </ion-item>